Kako ustvariti vrstico napredka v HTML-ju?

Vrstice napredka se uporabljajo za določanje določenih mejnikov med opravilom v odstotkih. Vrstico napredka lahko ustvarite v ki določa potek zaključka naloge. Vrednost vrstice napredka lahko upravlja z JavaScriptom. V tem članku bomo videli, kako lahko s pomočjo HTML, CSS in JavaScript ustvarite vrstico napredka v naslednjem zaporedju:

• Kako ustvariti vrstico napredka v HTML-ju?
• Vrstica napredka: primer

Začnimo.

Kako ustvariti vrstico napredka v HTML-ju?

Vrstica napredka prikazuje napredek katere koli naloge, ki se izvaja. Na splošno se te vrstice uporabljajo za prikaz stanja prenosa in nalaganja. Lahko rečemo, da lahko s stolpci napredka prikažemo stanje vsega, kar je v teku.

Če želite ustvariti osnovno vrstico napredka z uporabo , je treba izvesti naslednje korake:

• Ustvarite strukturo HTML za vrstico napredka - HTML oznaka določa potek zaključka naloge.

• Dodajanje CSS - Naslednji korak je dodati barvo ozadja vrstice napredovanja in stanje napredka v vrstici s pomočjo CSS .

#Progress_Status {širina: 50% barva ozadja: #ddd} #myprogressBar {širina: 1% višina: 35px barva ozadja: # 4CAF50 poravnava besedila: srednja črta-višina: 32px barva: črna}

• Dodajanje JavaScript - Naslednji korak je ustvariti dinamično animirano vrstico proges s pomočjo funkcije javascript nadgradnja in prizor .

posodobitev funkcije () {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 = širina + '%'}}}

Zdaj, ko poznate različne korake za ustvarjanje vrstice napredka, pojdimo naprej in si oglejte celoten primer vrstice napredka.

Vrstica napredka: primer

Ko končate različne korake za ustvarjanje vrstice napredovanja, je čas, da povežete HTML, CSS in Elementi JavaScript . Naslednji primer prikazuje celotno kodo vrstice napredovanja, ki povezuje zgoraj HTML, CSS in JavaScript Kode:

#Progress_Status {širina: 50% barva ozadja: #ddd} #myprogressBar {širina: 2% višina: 20px barva ozadja: # 4CAF50}
Primer vrstice napredka z uporabo JavaScript
 
Stanje prenosa datoteke:
  
Začni prenos posodobitve funkcije () {var element = document.getElementById ('myprogressBar') var width = 1 var ident = setInterval (scene, 10) scene scene () {if (width> = 100) {clearInterval (identity)} else {širina ++ element.style.width = širina + '%'}}}

Izhod:

S tem smo prišli do konca našega članka. Upam, da ste razumeli različne korake, potrebne za ustvarjanje vrstice napredka.

Oglejte si našo ki prihaja z usposabljanjem pod vodstvom inštruktorjev v živo in izkušnjami iz resničnih projektov. To usposabljanje vam omogoča, da obvladate veščine za delo z zalednimi in prednjimi spletnimi tehnologijami. Vključuje usposabljanje za spletni razvoj, jQuery, Angular, NodeJS, ExpressJS in MongoDB.

Imate vprašanje za nas? Prosimo, omenite to v oddelku za komentarje tega spletnega dnevnika in javili se vam bomo.

plitka vs globoka kopija java