Cara Membuat Javascript CountDown Timer Dengan Mudah

Javascript countdown timer terkadang diperlukan untuk membuat sebuah halaman landing page seperti halaman perilisan sesuatu, maintenance atau under contruction. Tidak hanya untuk itu saja, namun beberapa file hosting yang menyediakan gratis, di halaman download akan diberikan countdown timer yang digunakan sebagai menampilkan iklan pada website itu. Countdown timer tidak berfungsi dengan baik dibeberapa ponsel contohnya java. Terkadang harus mereload sendiri dengan bantuan javascript di URL untuk melewati countdown timer. Tapi diponsel Android, semua javascript memungkinkan bekerja dengan baik salah satunya javascript countdown timer.

Seperti di situs ini yang memakai javascript countdown timer dibagian halaman pengalihan. Sengaja Saya buat untuk menampilkan beberapa iklan dihalaman itu. Membuatnya juga tidak begitu sulit hanya memerlukan sedikit pengertian dengan javascript.
Disini Saya akan membagikan javascript countdown timer yang sangat sederhana dan sekiranya mudah dipahami. Hanya menggunakan beberapa fungsi saja seperti if else, setinterval, dan window location. Sebelumnya silahkan pahami sedikit fungsi yang saya sebutkan tadi, dan jika sudah mengerti, silahkan salin kode dibawah ini.

<script type="text/javascript">
var waktu = 12;
setInterval(function() {
waktu--;
if(waktu < 0) {
window.location = 'http://URLTarget.tld';
}else{
document.getElementById("countdown").innerHTML = waktu;
}
}, 1000);
</script>

Pertama – tama salin kode diatas dan tempel pada bagian headtags dihalaman yang ingin kamu beri countdown timer. Jangan lupa atur detik waktu berjalan pada string waktu. Sengaja Saya beri 12 karena saat pengunjung membuka halaman javascript akan langsung menurun menjadi 10 atau 9. Untuk menampilkan countdown timer dapat menggunakan kode seperti dibawah ini.

<span id="countdown">10</span>

Kode diatas memang pada bagian value telah diberi 10, namun karena javascript telah dipanggil dari awal, maka dari tags html yang diberi attribute ID countdown akan diberikan value yang sama dari javascript countdown timer. Kamu dapat mengubah span menjadi div, dan sebagainya.

Cukup mudah bukan..? Beberapa orang meng-kreasikan kode javascript countdown ini dengan bentuk progress bar. Perlu diketahui juga bahwa kode diatas tidak memerlukan bantuan jquery.
Jika ada yang ditanyakan tentang diatas, silahkan berkomentar. 😀

Semoga bermanfaat dan Selamat mencoba