Bagaimana untuk menetapkan kira detik dalam javascript

JavaScript untuk menetapkan kira detik

Undur detik ialah fungsi yang sangat menarik dan praktikal. Di tapak web, ia boleh digunakan untuk mengingatkan pengguna tentang ketibaan acara penting tertentu, seperti masa jualan, masa jualan tergesa-gesa, dsb. Dalam artikel ini, kita akan belajar cara menetapkan kira detik menggunakan JavaScript.

Langkah 1: Dapatkan masa semasa

Mendapatkan masa semasa ialah langkah pertama untuk melaksanakan fungsi kira detik. Untuk mendapatkan masa semasa, anda boleh menggunakan fungsi terbina dalam JavaScript. Berikut ialah contoh kod untuk mendapatkan masa semasa:

var currentDate = new Date();

Kod di atas mencipta objek Tarikh yang mewakili tarikh dan masa semasa.

Langkah 2: Tetapkan tarikh akhir

Selepas mendapat masa semasa, langkah seterusnya ialah menetapkan tarikh akhir. Tarikh akhir boleh ditentukan secara manual atau diperoleh daripada pelayan. Berikut ialah kod sampel untuk menetapkan tarikh akhir secara manual:

var dueDate = new Date('2021-12-31 23:59:59');

Kod di atas mencipta objek Tarikh, yang mewakili titik masa 23:59:59 pada 31 Disember 2021.

Langkah 3: Kira masa kira detik

Selepas mendapat masa semasa dan menetapkan tarikh akhir, langkah seterusnya ialah mengira masa kira detik. Mengira masa kira detik adalah semudah menolak tarikh semasa daripada tarikh tamat. Berikut ialah contoh kod yang mengira masa kira detik:

var timeLeft = dueDate.getTime() - currentDate.getTime();

Kod di atas mengira bilangan milisaat antara tarikh akhir dan tarikh semasa. Jika kita ingin menukarnya kepada hari, jam, minit dan saat, kita boleh menukarnya seperti berikut:

var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

Kod di atas menukar milisaat kepada hari, jam, minit dan Bilangan saat.

Langkah 4: Paparkan kiraan detik

Selepas mengira masa kira detik, langkah terakhir ialah memaparkan masa kira detik pada halaman web. Ini boleh dicapai dengan memperuntukkan masa kira detik kepada atribut textContent bagi elemen HTML. Berikut ialah contoh kod yang memaparkan kira detik:

document.getElementById('countdown').textContent = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒 ';

Kod di atas memaparkan bilangan hari, jam, minit dan saat yang dikira pada elemen HTML dengan kiraan detik id.

Langkah 5: Kira detik kemas kini masa nyata

Kod di atas hanya akan mengira kira detik dan memaparkannya apabila halaman dimuatkan jika anda ingin mencapai kesan kira detik kemas kini masa nyata , anda boleh menggunakan fungsi setInterval. Fungsi setInterval membolehkan fungsi dilaksanakan dengan kerap, dengan itu mencapai kesan mengemas kini kira detik dalam masa nyata. Berikut ialah kod sampel yang menggunakan fungsi setInterval untuk melaksanakan kira detik kemas kini masa nyata:

setInterval(function() {
  var currentDate = new Date();
  var timeLeft = dueDate.getTime() - currentDate.getTime();
  var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
  var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
  document.getElementById('countdown').textContent = days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒 ';
}, 1000);

Dalam kod di atas, fungsi setInterval melaksanakan fungsi tanpa nama setiap 1000 milisaat (iaitu 1 saat), sekali gus mencapai kesan kira detik kemas kini masa nyata.

Ringkasan

Countdown ialah fungsi yang sangat praktikal dan menarik yang boleh digunakan dalam halaman web untuk menarik perhatian pengguna. Menyediakan kira detik menggunakan JavaScript tidak rumit dan hanya mengambil beberapa langkah untuk diselesaikan. Mula-mula dapatkan masa semasa, kemudian tetapkan tarikh akhir, kemudian hitung masa kira detik, dan akhirnya paparkan masa kira detik pada halaman web. Jika anda perlu mencapai kesan mengemas kini kira detik dalam masa nyata, anda boleh menggunakan fungsi setInterval.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kira detik dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!