Trake napretka koriste se za određivanje određenih prekretnica tijekom zadatka na postotak. Možete stvoriti traku napretka u koja određuje napredak dovršenja zadatka. Vrijednošću trake napretka može se upravljati JavaScriptom. U ovom ćemo članku vidjeti kako možete stvoriti traku napretka uz pomoć HTML-a, CSS-a i JavaScript-a u sljedećem slijedu:
Započnimo.
Kako stvoriti traku napretka u HTML-u?
Traka napretka prikazuje napredak bilo kojeg zadatka koji se izvršava. Općenito se ove trake koriste za prikaz statusa preuzimanja i prijenosa. Možemo reći da se trake napretka mogu koristiti za prikaz statusa bilo čega što je u tijeku.
strukture podataka i algoritmi
Da biste stvorili osnovnu traku napretka pomoću , potrebno je izvršiti sljedeće korake:
- Stvorite HTML strukturu za traku napretka - HTML označiti određuje napredak dovršenja zadatka.
- Dodavanje CSS-a - Sljedeći je korak dodavanje boje pozadine trake napretka kao i statusa napretka u traci uz pomoć CSS .
#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 1% height: 35px background-color: # 4CAF50 text-align: center-height: 32px color: black}- Dodavanje JavaScript-a - Sljedeći korak je stvaranje dinamične animirane proges trake pomoću funkcije javascripta Ažuriraj i scena .
ažuriranje 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 + '%'}}}Sad kad znate različite korake za stvaranje trake napretka, krenimo dalje i pogledajte cjeloviti primjer trake napretka.
Traka napretka: Primjer
Nakon što dovršite različite korake za stvaranje trake napretka, vrijeme je da povežete HTML, CSS i JavaScript elementi . Sljedeći primjer prikazuje cjeloviti kod trake napretka koji povezuje gore navedeno HTML, CSS i JavaScript Kodovi:
#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}Primjer trake napretka pomoću JavaScript-a
Status preuzimanja datoteke:
Započnite ažuriranje funkcije preuzimanja () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) scene funkcije () {if (width> = 100) {clearInterval (identity)} else {širina ++ element.style.width = širina + '%'}}}Izlaz:
Ovime smo došli do kraja našeg članka. Nadam se da ste razumjeli različite korake potrebne za stvaranje trake napretka.
Pogledajte naš koja dolazi s treningom uživo pod vodstvom instruktora i iskustvom u stvarnom životu. Ovaj trening čini vas vještima za rad s back-end i front-end web tehnologijama. Uključuje obuku o web razvoju, jQueryju, Angularu, NodeJS, ExpressJS i MongoDB.
Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare ovog bloga i mi ćemo vam se javiti.