Pažangos juostos naudojamos tam tikriems užduoties etapams nustatyti procentais. Galite sukurti eigos juostą tai nurodo užduoties atlikimo eigą. „JavaScript“ gali valdyti eigos juostos vertę. Šiame straipsnyje pamatysime, kaip galite sukurti eigos juostą naudodamiesi HTML, CSS ir „JavaScript“ tokia seka:
Pradėkime.
Kaip sukurti pažangos juostą HTML?
„Progress“ juosta rodo bet kokios vykdomos užduoties eigą. Paprastai šios juostos naudojamos parodyti atsisiuntimo ir įkėlimo būseną. Galime sakyti, kad progreso juostos gali būti naudojamos vaizduojant bet kokio vykstančio statusą.
Norėdami sukurti pagrindinę pažangos juostą naudodami , reikia atlikti šiuos veiksmus:
- Sukurkite HTML struktūrą savo eigos juostai - HTML žyma nurodo užduoties atlikimo eigą.
- CSS pridėjimas - Kitas žingsnis yra pridėti eigos juostos fono spalvą ir eigos būseną juostoje CSS .
#Progress_Status {plotis: 50% background-color: #ddd} #myprogressBar {width: 1% height: 35px background-color: # 4CAF50 text-align: center line-height: 32px color: black}- Pridedama „JavaScript“ - Kitas žingsnis yra sukurti dinamišką animuotą progess juostą naudojant „javascript“ funkcijos atnaujinti ir scena .
funkcijos atnaujinimas () {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 + '%'}}}Dabar, kai žinote įvairius eigos juostos sukūrimo veiksmus, eikime toliau ir pažvelkime į visą pažangos juostos pavyzdį.
kas yra java klasės pavyzdys
„Progress Bar“: pavyzdys
Atlikę įvairius veiksmus, kad sukurtumėte eigos juostą, laikas susieti HTML, CSS ir „JavaScript“ elementai . Šis pavyzdys rodo visą pažangos juostos kodą, susiejantį aukščiau HTML, CSS ir „JavaScript“ Kodai:
#Progress_Status {plotis: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}Pažangos juostos, naudojant „JavaScript“, pavyzdys
Failo atsisiuntimo būsena:
Pradėti atsisiuntimo funkcijos naujinimą () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {plotis ++ element.style.width = plotis + '%'}}}Išvestis:
Tuo mes pasiekėme savo straipsnio pabaigą. Tikiuosi, kad supratote įvairius veiksmus, reikalingus norint sukurti eigos juostą.
Patikrinkite mūsų kuris ateina su instruktorių vedamomis tiesioginėmis treniruotėmis ir realių projektų patirtimi. Šie mokymai leidžia išmokti dirbti su išorinėmis ir išorinėmis interneto technologijomis. Tai apima mokymus apie žiniatinklio plėtrą, „jQuery“, „Angular“, „NodeJS“, „ExpressJS“ ir „MongoDB“.
Turite mums klausimą? Prašau tai paminėti šio tinklaraščio komentarų skiltyje ir mes su jumis susisieksime.