Countdown timer biasanya digunakan pada website-website landing page ketika mereka akan merilis project / product mereka dalam waktu dekat.
Tujuannya agar memberi kesan bahwa product/project ini adalah sesuatu yang 'besar', 'penting', dan patut dinantikan.
Tapi, para blogger juga biasanya menggunakan script ini untuk menunjukkan sesuatu yang lain.
Misalnya, Arlinadzgn menggunakan script countdown time ini untuk menampilkan kapan bulan ramadhan akan dimulai.
Bisa dibilang, script ini cukup usefull karena bisa digunakan diberbagai kegiatan dan keadaan.
Tertarik menggunakannya juga? kalau iya lanjut baca aja terus panduan ini.
Script
Terdapat 2 bahasa yang digunakan, yaitu HTML dan Javascript.
Javascript berfungsi untuk mengatur semuanya, sedangkan script pada HTML berfungsi sebagai pemanggil nya.
HTML
<p id="waktu"></p>Javascript
<script type="text/javascript">
// Atur waktu timer nya disini (ubah sesuai kebutuhan)
var countDownDate = new Date("Oct 10, 2021 10:00:00").getTime();
// Waktu berkurang setiap 1 detik
var x = setInterval(function() {
// Mengambil waktu sekarang dari komputer pengguna
var now = new Date().getTime();
// Menghitung perbedaan waktu sekarang dengan waktu yang diatur sebelumnya
var distance = countDownDate - now;
// Membuat variabel untuk hari,jam,menit, dan detik (jangan diubah)
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Menampilkan timer di elemen dengan id = waktu (boleh diubah)
document.getElementById("waktu").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// Kalau timer sudah selesai, munculkan sesuatu
if (distance < 0) {
clearInterval(x);
document.getElementById("waktu").innerHTML = "SELESAI";
}
}, 1000);
</script>Jika ingin merubah id pada elemen pemanggil, jangan lupa juga untuk merubah id yang ada pada script Javascript nya.
Misal, anda ingin menggunakan id hitungmundur, anda tinggal mengganti id pada elemen p dan mencari kata waktu yang sudah saya tandai diatas, kemudian menggantinya dengan hitungmundur.
Live demo bisa anda lihat dibawah ini :
Sumber kode : W3schools
