≡ Menu

Cara Membuat Javascript CountDown Timer Dengan Mudah

Javascript countdown timer

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

About the author: Apapun yang Saya ketahui dan Saya bagikan. Semuanya berawal dari masa yang disebut pembelajaran.

{ 5 comments… add one }
  • merta August 25, 2015, 3:54 am

    gan, gmana klw ketika qt refres countdown masih berjalan dan tidak terulang ke perhitungan awal.??

    • rrobyf August 26, 2015, 11:11 pm

      Apakah seperti situs yang akan segera launching, yang dipasang perhitungan mundur (countdown) ? Itu akan lebih mudah menggunakan Jquery

  • banghaji August 2, 2015, 9:15 am

    makasih gan atas ilmunya, ane mohon izin make scriptnya ya gan…

  • Disza Jatnika July 11, 2015, 9:16 am

    gan ada gx skrip game yang kayak “INDONESIA PINTAR”, quis gitu. tolong bales ya gan.

    • rrobyf July 11, 2015, 9:23 am

      Saya kurang tau seperti apa, tapi kalo dibuat pasti bisa. Membuat sistem Quiz lebih baik menggunakan PHP & MySQL, Tidak dengan Javascript. 😀

Leave a Comment