Hvordan oprettes en statuslinje i HTML?

Forløbsbjælkerne bruges til at bestemme bestemte milepæle under en opgave til en procentdel. Du kan oprette en statuslinje i der angiver færdiggørelsesforløbet for en opgave. Værdien af ​​statuslinjen kan manipuleres med JavaScript. I denne artikel vil vi se, hvordan du kan oprette en statuslinje ved hjælp af HTML, CSS og JavaScript i følgende rækkefølge:

• Hvordan oprettes en statuslinje i HTML?
• Statuslinje: Eksempel

Lad os begynde.

Hvordan oprettes en statuslinje i HTML?

En statuslinje viser fremskridtet for enhver opgave, der udføres. Generelt bruges disse søjler til at vise status for download og upload. Vi kan sige, at fremskridtlinjer kan bruges til at skildre status for alt, hvad der er i gang.

For at oprette en grundlæggende statuslinje ved hjælp af , skal følgende trin udføres:

• Opret HTML-struktur til din statuslinje - HTML tag angiver en færdiggørelsesfremgang for en opgave.

• Tilføjelse af CSS - Det næste trin er at tilføje baggrundsfarve på statuslinjen samt status på status i bjælken ved hjælp af CSS .

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

• Tilføjelse af JavaScript - Det næste trin er at oprette en dynamisk animeret proceslinje ved hjælp af javascript-funktioner opdatering og scene .

funktionsopdatering () {var element = document.getElementById ('myprogressBar') var bredde = 1 var identitet = setInterval (scene, 10) funktions scene () {hvis (bredde> = 100) {clearInterval (identitet)} andet {bredde ++ element.style.width = bredde + '%'}}}

Nu hvor du kender de forskellige trin til at oprette en statuslinje, lad os gå videre og se på det komplette eksempel på en statuslinje.

Statuslinje: Eksempel

Når du har gennemført de forskellige trin for at oprette en statuslinje, er det tid til at linke HTML, CSS og JavaScript-elementer . Følgende eksempel viser den komplette kode for statuslinjen, der forbinder ovenstående HTML, CSS og JavaScript Koder:

#Progress_Status {bredde: 50% baggrundsfarve: #ddd} #myprogressBar {bredde: 2% højde: 20px baggrundsfarve: # 4CAF50}
Eksempel på statuslinje ved hjælp af JavaScript
 
Download status for en fil:
  
Start Download funktionsopdatering () {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 + '%'}}}

Produktion:

pl / sql undtagelse håndtering

Med dette er vi kommet til slutningen af ​​vores artikel. Jeg håber, du har forstået de forskellige trin, der kræves for at oprette en statuslinje.

Tjek vores som kommer med instruktørstyret live træning og projektoplevelse i det virkelige liv. Denne træning gør dig dygtig til at arbejde med back-end og front-end webteknologier. Det inkluderer træning i webudvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.

Har du et spørgsmål til os? Nævn det i kommentarsektionen på denne blog, så vender vi tilbage til dig.