Kuidas HTML-is edenemisriba luua?

Edenemisribasid kasutatakse ülesande käigus teatud verstapostide määramiseks protsentides. Saate luua edenemisriba mis täpsustab ülesande lõpuleviimist. Edenemisriba väärtust saab JavaScripti abil manipuleerida. Selles artiklis näeme, kuidas saate HTML, CSS ja JavaScripti abil edenemisriba luua järgmises järjestuses:

• Kuidas HTML-is edenemisriba luua?
• Edenemisriba: näide

Alustagem.

c c ++ ja java erinevus

Kuidas HTML-is edenemisriba luua?

Edenemisriba näitab mis tahes täidetava ülesande edenemist. Üldiselt kasutatakse neid ribasid allalaadimise ja üleslaadimise oleku kuvamiseks. Võime öelda, et edenemisribasid saab kasutada kõige poolelioleva oleku kujutamiseks.

Põhilise edenemisriba loomiseks, kasutades , tuleb läbi viia järgmised sammud:

• Looge oma edenemisribale HTML-struktuur - HTML silt määrab ülesande lõpuleviimise.

• CSS-i lisamine - Järgmine samm on lisada abiga nii edenemisriba taustavärv kui ka edenemise olek CSS .

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 1% height: 35px background-color: # 4CAF50 text-align: center line-height: 32px color: black}

• JavaScripti lisamine - Järgmine samm on dünaamilise animeeritud progessiriba loomine javascripti funktsioonid värskendus ja stseen .

funktsiooni värskendus () {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 + '%'}}}

Nüüd, kui teate edenemisriba loomise erinevaid samme, jätkame ja vaatame edenemisriba täielikku näidet.

Edenemisriba: näide

Kui olete edenemisriba loomiseks erinevad toimingud teinud, on aeg linkida HTML, CSS ja JavaScripti elemendid . Järgmine näide näitab ülaltoodud linkimise edenemisriba täielikku koodi HTML, CSS ja JavaScript Koodid:

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}
Näide edenemisribast JavaScripti abil
 
Faili allalaadimise olek:
  
Käivitage funktsiooni Värskendus allalaadimine () {var element = document.getElementById ('myprogressBar') var width = 1 varident = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = width + '%'}}}

Väljund:

Sellega oleme jõudnud oma artikli lõpuni. Loodan, et mõistsite edenemisriba loomiseks vajalikke erinevaid samme.

Vaadake meie mis on varustatud juhendajate juhitud elava koolituse ja reaalse elu projektikogemusega. See koolitus võimaldab teil omandada oskusi, mis võimaldavad töötada tagumise ja esiotsa veebitehnoloogiatega. See sisaldab koolitust veebiarenduse, jQuery, Angular, NodeJS, ExpressJS ja MongoDB kohta.

Kas teil on meile küsimus? Palun mainige seda selle ajaveebi kommentaaride jaotises ja võtame teiega ühendust.