Kuinka luoda edistymispalkki HTML-muodossa?

Edistymispalkkeja käytetään määrittämään tietyt virstanpylväät tehtävän aikana prosentteina. Voit luoda etenemispalkin joka määrittää tehtävän suorittamisen etenemisen. JavaScript voi muokata etenemispalkin arvoa. Tässä artikkelissa näemme, kuinka voit luoda edistymispalkin HTML: n, CSS: n ja JavaScriptin avulla seuraavassa järjestyksessä:

• Kuinka luoda edistymispalkki HTML-muodossa?
• Edistymispalkki: Esimerkki

Aloitetaanpa.

Kuinka luoda edistymispalkki HTML-muodossa?

Edistymispalkki kuvaa suoritettavien tehtävien edistymistä. Yleensä näitä palkkia käytetään lataus- ja lataustilan näyttämiseen. Voimme sanoa, että etenemispalkkeja voidaan käyttää kuvaamaan kaiken käynnissä olevan tilaa.

Perustoimintopalkin luominen käyttämällä , on suoritettava seuraavat vaiheet:

• Luo HTML-rakenne edistymispalkkiin - HTML tag määrittää tehtävän suorittamisen etenemisen.

• CSS: n lisääminen - Seuraava vaihe on lisätä etenemispalkin taustaväri ja palkin edistymisen tila CSS .

#Progress_Status {leveys: 50% taustaväri: #ddd} #myprogressBar {leveys: 1% korkeus: 35 kuvapisteen taustaväri: # 4CAF50 tekstin tasaus: keskilinjan korkeus: 32 kuvapisteen väri: musta}

• Lisätään JavaScriptiä - Seuraava vaihe on luoda dynaaminen animoitu etenemispalkki käyttämällä javascript-toiminnot päivittää ja näkymä .

funktion päivitys () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = width + '%'}}}

Nyt kun tiedät edistymispalkin luomisen eri vaiheet, siirrytään eteenpäin ja katsotaan etenemispalkin täydellinen esimerkki.

Edistymispalkki: Esimerkki

Kun olet suorittanut edistymispalkin luomisen eri vaiheet, on aika linkittää HTML, CSS ja JavaScript-elementit . Seuraava esimerkki näyttää edellisen linkin koko etenemispalkin koodin HTML, CSS ja JavaScript Koodit:

#Progress_Status {leveys: 50% taustaväri: #ddd} #myprogressBar {leveys: 2% korkeus: 20px taustaväri: # 4CAF50}
Esimerkki etenemispalkista, joka käyttää JavaScriptiä
 
Tiedoston lataustila:
  
Aloita lataustoiminnon päivitys () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = width + '%'}}}

Tuotos:

käännä numero pythonissa

Tämän avulla olemme päässeet artikkelimme loppuun. Toivon, että ymmärsit edistymispalkin luomisen edellyttämät vaiheet.

Katso meidän joka sisältää ohjaajan vetämän live-koulutuksen ja tosielämän projektikokemuksen. Tämä koulutus antaa sinulle taitoja työskennellä back-end- ja front-end-verkkoteknologioiden kanssa. Se sisältää koulutusta verkkokehityksestä, jQuerystä, Angularista, NodeJS: stä, ExpressJS: stä ja MongoDB: stä.

Onko sinulla kysymys meille? Mainitse se tämän blogin kommenttiosassa ja palaamme sinuun.