JavaScript-program för att skapa nedräkningstimer

I det här exemplet lär du dig att skriva ett JavScript-program som skapar en nedräkningstimer.

För att förstå detta exempel bör du ha kunskap om följande JavaScript-programmeringsämnen:

  • JavaScript Math golv ()
  • JavaScript datum och tid
  • Javascript setInterval ()

Exempel: Skapa en nedräkningstimer

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

Produktion

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

I ovanstående program används setInterval()metoden för att skapa en timer.

Den setInterval()metod utförs vid ett givet tidsintervall (här 2000 millisekunder).

Detta new Date()ger aktuellt datum och tid. Till exempel,

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

Den getTime()metoden returnerar antalet millisekunder från midnatt 1 Januari 1970 (ECMAScript epok) till angivet datum (här aktuellt datum).

Följande kod ger nästa dags tid i millisekunder.

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

Nu kan vi beräkna den återstående tiden med följande formel:

 let timeLeft = countDownDate - now;

Återstående antal dagar beräknas med:

  • Tidsintervallet divideras med 1000 för att bestämma antalet sekunder, dvs.timeLeft / 1000
  • Tidsintervallet divideras sedan med 60 * 60 * 24 för att bestämma antalet dagar som återstår.
  • Den Math.floor()funktionen används för att avrunda tal till ett heltal.

Liknande metoder används i timmar, minuter och sekunder.

Obs! Du kan också använda en anpassad nedräkningstid genom att skicka ett visst datum.

Till exempel,

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

Intressanta artiklar...