Kaip sukurti atgalinį laikmatį

Naudodami „JavaScript“ įprastus laiko įvykius, lengva sukurti paprastą atgalinį laikmatį. Daugiau apie tuos galite perskaityti šiame straipsnyje.

Atgalinės atskaitos laikmačio sukūrimas

Pradėkite deklaruojant tuščią funkcija vadinama startCountdown, kad turėjo secondskaip argumentą:

function startCountdown(seconds) { };

Mes norime sekti sekundes, kurios praeina, kai paleidžiamas laikmatis, todėl naudokite letdeklaruoti kintamąjį, kuris vadinamas, counterir nustatyti jį lygiu seconds:

function startCountdown(seconds) { let counter = seconds; }

Atminkite, kad geriausia praktika išsaugoti laiko įvykio funkciją kintamajame. Tai leidžia daug lengviau sustabdyti laikmatį vėliau. Sukurkite kintamąjį, pavadintą intervalir nustatykite jį lygiu setInterval():

function startCountdown(seconds) { let counter = seconds; const interval = setInterval(); }

Funkciją galite perduoti tiesiogiai setInterval, todėl perduokime jai tuščią rodyklės funkciją kaip pirmąjį argumentą. Be to, mes norime, kad funkcija būtų vykdoma kiekvieną sekundę, todėl antrąjį argumentą perduodate 1000:

function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { }, 1000); }

Dabar funkcija, kurią perdavėme, setIntervalbus vykdoma kiekvieną sekundę. Kiekvieną kartą, kai ji veikia, norime užregistruoti dabartinę counterkonsolės vertę prieš ją sumažinant:

function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; }, 1000); }

Dabar, jei paleisite funkciją, pamatysite, kad ji veikia, bet nesustoja, kai counteryra mažiau nei 0:

startCountdown(5); // Console Output // // 5 // 4 // 3 // 2 // 1 // 0 // -1 // -2 

Norėdami tai išspręsti, pirmiausia parašykite ifteiginį, kuris vykdomas, kai counteryra mažiau nei 0:

function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; if (counter < 0 ) { } }, 1000); }

Tada ifteiginio viduje išvalykite „ intervalwith“ clearIntervalir užregistruokite aliarmo garso eilutę konsolėje:

function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; if (counter < 0 ) { clearInterval(interval); console.log('Ding!'); } }, 1000); }

Vykdymas

Dabar, kai paleisite laikmatį, turėtumėte pamatyti:

startCountdown(5); // Console Output // // 5 // 4 // 3 // 2 // 1 // 0 // Ding!

Daugiau išteklių

„JavaScript“ laiko įvykiai: „setTimeout“ ir „setInterval“