Barele de progres sunt folosite pentru a determina anumite repere în timpul unei sarcini la un procent. Puteți crea o bară de progres în care specifică progresul finalizării unei sarcini. Valoarea barei de progres poate fi manipulată de JavaScript. În acest articol, vom vedea cum puteți crea o bară de progres cu ajutorul HTML, CSS și JavaScript în următoarea secvență:
merge sort c++
Sa incepem.
Cum se creează o bară de progres în HTML?
O bară de progres ilustrează progresul oricărei sarcini care este efectuată. În general, aceste bare sunt utilizate pentru a afișa starea de descărcare și încărcare. Putem spune că barele de progres pot fi folosite pentru a descrie starea a tot ceea ce se află în desfășurare.
Pentru a crea o bară de progres de bază folosind , trebuie parcurși următorii pași:
- Creați o structură HTML pentru bara de progres - Codul HTML etichetă specifică progresul finalizării unei sarcini.
- Adăugarea CSS - Următorul pas este să adăugați culoarea de fundal a barei de progres, precum și starea de progres în bară cu ajutorul CSS .
#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 1% height: 35px background-color: # 4CAF50 text-align: centru-înălțime linie: 32px culoare: negru}- Adăugarea JavaScript - Următorul pas este de a crea o bară dinamică de programe animată folosind funcții javascript Actualizați și scenă .
actualizare funcție () {var element = document.getElementById ('myprogressBar') var width = 1 var identitate = setInterval (scenă, 10) scenă funcție () {if (width> = 100) {clearInterval (identitate)} else {width ++ element.style.width = width + '%'}}}Acum, că știți diferiții pași pentru a crea o bară de progres, să trecem mai departe și să aruncăm o privire la exemplul complet al unei bare de progres.
Bara de progres: Exemplu
După ce ați parcurs diferiții pași pentru a crea o bară de progres, este timpul să conectați HTML, CSS și Elemente JavaScript . Următorul exemplu arată codul complet al barei de progres care leagă cele de mai sus HTML, CSS și JavaScript Coduri:
#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}Exemplu de bara de progres folosind JavaScript
Descărcați starea unui fișier:
Începeți să descărcați actualizarea funcției () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) scene scene () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = width + '%'}}}Ieșire:
Cu aceasta, am ajuns la sfârșitul articolului nostru. Sper că ați înțeles diferiții pași necesari pentru a crea o bară de progres.
Verificați-ne care vine cu instruire live condusă de instructor și experiență în viața reală a proiectului. Această instruire vă face să aveți abilități de a lucra cu tehnologii web back-end și front-end. Include cursuri de dezvoltare web, jQuery, Angular, NodeJS, ExpressJS și MongoDB.
Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii a acestui blog și vă vom răspunde.