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