Video: How to make CSS Progress Bar using javascript 2024
Brukere er utålmodige, og noen ganger tar det en stund å fullføre. En fremdriftslinje gjør det mulig for CSS3-utvikleren å holde brukeren informert om fremdriften av en oppgave.
Moderne programmeringsstrategier prøver å hindre brukeren i å vente i det hele tatt ved å utføre lengre oppgaver i bakgrunnen, men noen ganger kan en bruker ikke fortsette før oppgaven er ferdig. Dette er tiden du trenger for å stole på en fremdriftslinje for å hindre at brukeren prøver å stoppe prosessen før den fullføres.
Følgende eksempel viser hvordan du bruker en fremdriftslinje. I dette tilfellet oppdateres fremdriftslinjen via en tidssløyfe. Hver gang timeren utløper, blir fremdriftslinjen oppdatert, og timeren gjenopprettes.
Resultatet er at fremdriftsdelindikatoren beveger seg fra venstre mot høyre og at timeren til slutt stopper når indikatoren beveger seg helt til høyre. (Du finner fullstendig kode for dette eksemplet i kapittel 06Widgets-mappen for den nedlastbare koden som Progressbar. HTML.)
// Konfigurer fremdriftslinjen. $ (funksjon () {$ ("# Progress"). progressbar ({verdi: 0});}) // Opprett en variabel for å holde tidsobjektet. var Timer; // Opprett en variabel for å holde total timeout. var timeout; funksjon StartTimer () {// Initialiser tidsavbrudd. Timeout = 0; // Angi maksimal verdi for fremdriftslinjen. $ ("# Progress"). fremdriftslinje ("alternativ", "maks", parseInt ($ ("# StartValue").val ())); // Lag timeren variabelen. Timer = vindu. setTimeout (UpdateTimer, 100);} funksjon UpdateTimer () {// Få maksimal verdi. var MaxTime = $ ("# Progress"). fremdriftslinje ("alternativ", "maks"); // Sjekk etter slutten av tidssyklusen. hvis (Timeout> = MaxTime) returnerer; // Oppdater Timeout-verdien. Timeout + = 100; // Oppdater prosentandelen fullført. $ ("# PercentDone"). tekst (matte runde ((Timeout / MaxTime) * 100)); // Angi fremdriftslinjens verdi. $ ("# Progress"). progressbar ("verdi", timeout); // Lag timeren variabelen. Timer = vindu. setTimeout (UpdateTimer, 100);}
Den første oppgaven er å lage fremdriftslinjen selv ved å ringe fremdriftslinje (). Legg merke til at du må oppgi en innledende verdi som input. Konfigurasjonslinjekonfigurasjonen er imidlertid ikke fullført - anropet til StartTimer () senere vil utføre noen ekstra konfigurasjonsoppgaver.
StartTimer () -funksjonen kalles når brukeren klikker på Start Timer-knappen på skjemaet. Denne funksjonen initialiserer to globale variabler. Timer er et tidsobjekt som brukes til å animere fremdriftslinjen. Timeout er nåværende tid i millisekunder.
Denne funksjonen konfigurerer også det maksimale alternativet for fremdriftslinjen.Indikatoren er en prosentandel av gjeldende verdi og egenskapene for maksimal verdi. Maksimalverdien er gitt av brukeren gjennom en kontroll, StartValue.
Når Timer utløper, kalles det UpdateTimer (). UpdateTimer () oppnår maksimal tid verdi fra fremdriftslinjen og plasserer den i MaxTime. Det bekrefter da at Timeout er mindre enn MaxTime. Når Timeout endelig når MaxTime, har fremdriftslinjen nådd 100 prosent, og det er på tide å stoppe timeren.
Det neste trinnet er å oppdatere Timeout til neste verdi. Hver iterasjon forandrer Timeout med 100 millisekunder.
Etter oppdatering av Timeout oppdaterer eksemplet skjermprosenten, som er lagret i et med et ID av PercentDone. Det oppdaterer også fremdriftslinjens verdiattributt slik at linjen beveger seg til neste posisjon.
En timer brenner bare en gang. For å opprette neste sløyfe av iterasjonen, må eksemplet tilbakestille Timer. Når den neste ventetiden på 100 millisekunder er over, kalles UpdateTimer () igjen og prosessen starter på nytt.
