V tomto příkladu se naučíte psát program JavScript, který vytvoří odpočítávací časovač.
Abyste pochopili tento příklad, měli byste znát následující programovací témata JavaScriptu:
- Matematická podlaha JavaScriptu ()
- Datum a čas v JavaScriptu
- Javascript setInterval ()
Příklad: Vytvořte odpočítávací časovač
// program to create a countdown timer // time to countdown from (in milliseconds) let countDownDate = new Date().getTime() + 24 * 60 * 60 * 1000; // countdown timer let x = setInterval(function() ( // get today's date and time in milliseconds let now = new Date().getTime(); // find the interval between now and the countdown time let timeLeft = countDownDate - now; // time calculations for days, hours, minutes and seconds const days = Math.floor( timeLeft/(1000*60*60*24) ); const hours = Math.floor( (timeLeft/(1000*60*60)) % 24 ); const minutes = Math.floor( (timeLeft/1000/60) % 60 ); const seconds = Math.floor( (timeLeft/1000) % 60 ); // display the result in the element with console.log(days + "d " + hours + "h " + minutes + "m " + seconds + "s "); // clearing countdown when complete if (timeLeft < 0) ( clearInterval(x); console.log('CountDown Finished'); ) ), 2000);
Výstup
0d 23h 59m 57s 0d 23h 59m 55s 0d 23h 59m 53s 0d 23h 59m 51s…
Ve výše uvedeném programu se setInterval()
metoda používá k vytvoření časovače.
setInterval()
Způsob je proveden v daném časovém intervalu (v tomto případě 2000 milisekund).
Znaménko new Date()
udává aktuální datum a čas. Například,
let d1 = new Date(); console.log(time); // Fri Aug 28 2020 09:19:40 GMT+0545 (+0545)
getTime()
Metoda vrací počet milisekund od půlnoci 1. ledna 1970 (ECMAScript epochy) k určitému datu (zde aktuální datum).
Následující kód poskytuje čas následujícího dne v milisekundách.
new Date().getTime() + 24 * 60 * 60 * 1000;
Nyní můžeme vypočítat zbývající čas pomocí následujícího vzorce:
let timeLeft = countDownDate - now;
Zbývající počet dní se vypočítá pomocí:
- Časový interval se dělí 1000, aby se určil počet sekund, tj
timeLeft / 1000
- Časový interval se pak vydělí 60 * 60 * 24, aby se určil počet zbývajících dnů.
Math.floor()
Funkce se používá k zaokrouhlení čísla na celé číslo.
Podobné metody se používají pro hodiny, minuty a sekundy.
Poznámka : Můžete také použít vlastní počáteční čas odpočítávání předáním konkrétního data.
Například,
let countDownDate = new Date("Aug 5, 2025 14:22:36").getTime();