Förloppsindikatorerna används för att bestämma vissa milstolpar under en uppgift till en procentsats. Du kan skapa ett framstegsfält i som anger slutförandet av en uppgift. Värdet på förloppsindikatorn kan manipuleras med JavaScript. I den här artikeln kommer vi att se hur du kan skapa ett framstegsfält med hjälp av HTML, CSS och JavaScript i följande sekvens:
Låt oss börja.
Hur skapar jag en förloppsindikator i HTML?
En förloppsindikator visar framstegen för varje uppgift som utförs. I allmänhet används dessa staplar för att visa nedladdnings- och uppladdningsstatus. Vi kan säga att Progress Bars kan användas för att skildra statusen för allt som pågår.
Att skapa en grundläggande förloppsindikator med måste följande steg utföras:
- Skapa HTML-struktur för din förloppsindikator - HTML märka anger en slutförd förlopp för en uppgift.
- Lägga till CSS - Nästa steg är att lägga till bakgrundsfärg för förloppsindikatorn samt förloppsstatus i fältet med hjälp av CSS .
#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 1% height: 35px background-color: # 4CAF50 text-align: center line-height: 32px color: black}- Lägga till JavaScript - Nästa steg är att skapa en dynamisk animerad processfält med javascript-funktioner uppdatering och scen .
funktionsuppdatering () {var element = document.getElementById ('myprogressBar') var bredd = 1 var identitet = setInterval (scen, 10) funktionsplats () {if (bredd> = 100) {clearInterval (identitet)} annat {bredd ++ element.style.width = bredd + '%'}}}Nu när du känner till de olika stegen för att skapa en förloppsindikator, låt oss gå vidare och titta på det fullständiga exemplet på en förloppsindikator.
till strängmetod i Java
Progress Bar: Exempel
När du har slutfört de olika stegen för att skapa ett framstegsfält är det dags att länka HTML, CSS och JavaScript-element . Följande exempel visar den fullständiga koden för framstegsfält som länkar till ovanstående HTML, CSS och JavaScript Koder:
#Progress_Status {bredd: 50% bakgrundsfärg: #ddd} #myprogressBar {bredd: 2% höjd: 20px bakgrundsfärg: # 4CAF50}Exempel på förloppsindikator med JavaScript
Hämta status för en fil:
Starta Ladda ner funktionsuppdatering () {var element = document.getElementById ('myprogressBar') var bredd = 1 var identitet = setInterval (scen, 10) funktionsplats () {if (bredd> = 100) {clearInterval (identitet)} annat {width ++ element.style.width = width + '%'}}}Produktion:
Med detta har vi kommit till slutet av vår artikel. Jag hoppas att du förstod de olika stegen som krävs för att skapa en förloppsindikator.
Kolla in vår som kommer med instruktörsledad live-utbildning och verklig projektupplevelse. Denna utbildning gör dig skicklig i färdigheter för att arbeta med back-end och front-end webbteknik. Det inkluderar utbildning om webbutveckling, jQuery, Angular, NodeJS, ExpressJS och MongoDB.
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen på den här bloggen så återkommer vi till dig.