Program JavaScript na vytvorenie odpočítavacieho časovača

V tomto príklade sa naučíte písať program JavScript, ktorý vytvorí odpočítavací časovač.

Aby ste pochopili tento príklad, mali by ste mať znalosti nasledujúcich tém programovania v jazyku JavaScript:

  • Matematická podlaha jazyka JavaScript ()
  • Dátum a čas JavaScriptu
  • Javascript setInterval ()

Príklad: Vytvorte odpočítavací č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ýkon

 0d 23h 59m 57s 0d 23h 59m 55s 0d 23h 59m 53s 0d 23h 59m 51s…

Vo vyššie uvedenom programe sa setInterval()metóda používa na vytvorenie časovača.

setInterval()Spôsob je vykonaný v danom časovom intervale (v tomto prípade 2000 milisekúnd).

new Date()Dáva aktuálny dátum a čas. Napríklad,

 let d1 = new Date(); console.log(time); // Fri Aug 28 2020 09:19:40 GMT+0545 (+0545)

getTime()Metóda vracia počet milisekúnd od polnoci 1. januára 1970 (ECMAScript epochy) k určitému dátumu (tu aktuálny dátum).

Nasledujúci kód poskytuje čas nasledujúceho dňa v milisekundách.

 new Date().getTime() + 24 * 60 * 60 * 1000;

Teraz môžeme vypočítať zostávajúci čas pomocou nasledujúceho vzorca:

 let timeLeft = countDownDate - now;

Zvyšný počet dní sa počíta pomocou:

  • Časový interval sa vydelí 1000, aby sa určil počet sekúnd, tjtimeLeft / 1000
  • Časový interval sa potom vydelí 60 * 60 * 24, aby sa určil počet zostávajúcich dní.
  • Math.floor()Funkcia sa používa na zaokrúhlenie čísla na celé číslo.

Podobné metódy sa používajú hodiny, minúty a sekundy.

Poznámka : Môžete tiež použiť vlastný začiatočný čas odpočítavania po zadaní konkrétneho dátumu.

Napríklad,

 let countDownDate = new Date("Aug 5, 2025 14:22:36").getTime();

Zaujímavé články...