JavaScript-program til oprettelse af nedtællingstimer

I dette eksempel lærer du at skrive et JavScript-program, der opretter en nedtællingstimer.

For at forstå dette eksempel skal du have kendskab til følgende JavaScript-programmeringsemner:

  • JavaScript matematikgulv ()
  • JavaScript dato og klokkeslæt
  • Javascript setInterval ()

Eksempel: Opret en nedtællingstimer

 // 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 ovenstående program setInterval()bruges metoden til at oprette en timer.

Den setInterval()metode udføres på et givet interval tid (her 2000 millisekunder).

Dette new Date()giver den aktuelle dato og tid. For eksempel,

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

Den getTime()metode returnerer antallet af millisekunder fra midnat af 1 januar, 1970 (ECMAScript epoke) til den angivne dato (her, aktuel dato).

Den følgende kode angiver den næste dags tid i millisekunder.

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

Nu kan vi beregne den resterende tid ved hjælp af følgende formel:

 let timeLeft = countDownDate - now;

Det resterende antal dage beregnes ved hjælp af:

  • Tidsintervallet divideres med 1000 for at bestemme antallet af sekunder, dvs.timeLeft / 1000
  • Tidsintervallet divideres derefter med 60 * 60 * 24 for at bestemme antallet af resterende dage.
  • Den Math.floor()funktion bruges til at afrunde tallet til et helt tal.

Lignende metoder bruges i timer, minutter og sekunder.

Bemærk : Du kan også bruge en brugerdefineret starttællingstid ved at sende en bestemt dato.

For eksempel,

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

Interessante artikler...