JavaScript-programma om een ​​afteltimer te maken

In dit voorbeeld leert u een JavScript-programma te schrijven dat een afteltimer maakt.

Om dit voorbeeld te begrijpen, moet u kennis hebben van de volgende JavaScript-programmeeronderwerpen:

  • JavaScript-wiskundevloer ()
  • JavaScript Datum en tijd
  • Javascript setInterval ()

Voorbeeld: maak een afteltimer

 // 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);

Uitvoer

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

In het bovenstaande programma wordt de setInterval()methode gebruikt om een ​​timer te maken.

De setInterval()methode wordt met een bepaald interval uitgevoerd (hier 2000 milliseconden).

De new Date()geeft de huidige datum en tijd weer. Bijvoorbeeld,

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

De getTime()methode retourneert het aantal milliseconden vanaf middernacht van 1 januari 1970 (EcmaScript-epoche) tot de opgegeven datum (hier de huidige datum).

De volgende code geeft de tijd van de volgende dag in milliseconden aan.

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

Nu kunnen we de resterende tijd berekenen met behulp van de volgende formule:

 let timeLeft = countDownDate - now;

Het resterende aantal dagen wordt berekend met:

  • Het tijdsinterval wordt gedeeld door 1000 om het aantal seconden te bepalen, dwztimeLeft / 1000
  • Het tijdsinterval wordt vervolgens gedeeld door 60 * 60 * 24 om het aantal resterende dagen te bepalen.
  • De Math.floor()functie wordt gebruikt om het getal af te ronden op een geheel getal.

Vergelijkbare methoden worden gebruikt voor uren, minuten en seconden.

Opmerking : u kunt ook een aangepaste afteltijd gebruiken door een specifieke datum door te geven.

Bijvoorbeeld,

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

Interessante artikelen...