Program JavaScript untuk Membuat Countdown Timer

Dalam contoh ini, anda akan belajar menulis program JavScript yang akan membuat pemasa undur.

Untuk memahami contoh ini, anda harus mempunyai pengetahuan mengenai topik pengaturcaraan JavaScript berikut:

  • Lantai Matematik JavaScript ()
  • Tarikh dan Masa JavaScript
  • Javascript setInterval ()

Contoh: Buat Pemasa Kiraan Balik

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

Pengeluaran

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

Dalam program di atas, setInterval()kaedah digunakan untuk membuat pemasa.

The setInterval()kaedah yang dilaksanakan pada masa selang tertentu (di sini, 2000 milisaat).

Yang new Date()memberikan tarikh dan masa semasa. Sebagai contoh,

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

The getTime()Cara mengembalikan bilangan milisaat dari tengah malam 1 Januari 1970 (ECMAScript zaman) untuk tarikh yang dinyatakan (di sini, tarikh semasa).

Kod berikut memberikan masa keesokan harinya dalam milisaat.

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

Sekarang, kita dapat mengira masa yang tersisa dengan menggunakan formula berikut:

 let timeLeft = countDownDate - now;

Baki hari yang dikira menggunakan:

  • Selang masa dibahagi dengan 1000 untuk menentukan bilangan saat, iaitutimeLeft / 1000
  • Selang masa kemudian dibahagi dengan 60 * 60 * 24 untuk menentukan jumlah hari yang tinggal.
  • Yang Math.floor()fungsi digunakan untuk pusingan nombor kepada nombor bulat.

Kaedah serupa digunakan selama berjam-jam, minit, dan saat.

Catatan : Anda juga dapat menggunakan waktu hitung mundur permulaan khusus dengan melewati tarikh tertentu.

Sebagai contoh,

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

Artikel menarik...