JavaScript programma, lai izveidotu atpakaļskaitīšanas taimeri

Šajā piemērā jūs iemācīsities rakstīt JavScript programmu, kas izveidos atpakaļskaitīšanas taimeri.

Lai saprastu šo piemēru, jums jāpārzina šādas JavaScript programmēšanas tēmas:

  • JavaScript matemātikas grīda ()
  • JavaScript datums un laiks
  • Javascript setInterval ()

Piemērs: izveidojiet atpakaļskaitīšanas taimeri

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

Rezultāts

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

Iepriekš minētajā programmā setInterval()metodi izmanto, lai izveidotu taimeri.

setInterval()Metode ir izpildīts noteiktā intervāla laika (šeit, 2000 milisekundes).

Norāda new Date()pašreizējo datumu un laiku. Piemēram,

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

getTime()Metode atgriež skaitu milisekunžu no pusnakts 1.janvāra, 1970 (ECMAScript laikmets) līdz norādītā datuma (šeit, pašreizējais datums).

Šis kods norāda nākamās dienas laiku milisekundēs.

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

Tagad mēs varam aprēķināt atlikušo laiku, izmantojot šādu formulu:

 let timeLeft = countDownDate - now;

Atlikušo dienas skaitu aprēķina, izmantojot:

  • Laika intervāls tiek dalīts ar 1000, lai noteiktu sekunžu skaitu, titimeLeft / 1000
  • Pēc tam laika intervāls tiek dalīts ar 60 * 60 * 24, lai noteiktu atlikušo dienu skaitu.
  • Math.floor()Funkcija tiek izmantota, lai noapaļot skaitu līdz veselam skaitlim.

Līdzīgas metodes tiek izmantotas stundām, minūtēm un sekundēm.

Piezīme . Varat arī izmantot pielāgotu sākuma atskaites laiku, nokārtojot noteiktu datumu.

Piemēram,

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

Interesanti raksti...