Cara Membuat Aplikasi Menghitung Waktu Mundur dengan Javascript

Pada postingan kali ini, saya akan memberikan tutorial Cara Membuat Aplikasi Menghitung Waktu Mundur dengan Javascript. Dalam tutorial ini, akan diajarkan cara membuat hitungan waktu mundur, dan setelah waktu yang ditentukan maka akan muncul sebuah teks atau link. Pada umumnya teknik ini banyak diterapkan pada website shorteUrl (pemendek URL), seperti adfly, google, shorte dan masih banyak lagi. Dan bahasa program yang digunakan yaitu javascript saja, dan sedikit script HTML. Baiklah, untuk mengetahui Cara Membuat Aplikasi Menghitung Waktu Mundur dengan Javascript silahkan buat file dengan nama “countDown.html”(tanpa tanda petik), setelah itu silahkan terapkan atau pelajari skrip dibawah ini :

 <script type = "text/javascript">
function countDown(secs, elem) {
 var element = document.getElementById(elem);
 element.innerHTML = "Tunggu "+secs+" Detik";
 if (secs < 1) {
  clearTimeout(timer);
  element.innerHTML = '<h2>Hitung Selesai</h2>';
  element.innerHTML += '<a href = "#">Clik Disini</a>';
 };
 secs--;
 var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);
}

</script>
<div id = "status"></div>
<script type = "text/javascript">countDown(10,"status");</script> 

Penjelasan skrip :

• var element = document.getElementById(elem) memiliki fungsi untuk membuat sebuah variabel, dimana memiliki target dari elemen html. Yaitu <div id = "status"></div> yang menurut html adalah nilai yang unik.
• element.innerHTML digunakan untuk membaca, menetapkan atau menambahakan konten HTML.
• Perhatikan Pada baris ke 5 sampai 9 adalah merupakan sebuah kondisi, dimana jika variabel secs lebih kecil dari 1, maka akan menghapus timer menggunakan method clearTimeout dan menampilkan link dan sebuah teks.
• var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000) merupakan sebuah perintah membuat variabel timer, setTimeout digunakan untuk membuat eksekusi kode waktu yang akan menjalankan script hanya sekali ketika waktu intervalnya tercapai.

Maka hasilnya seperti gambar dibawah ini :

Gambar 1

Gambar 2

Berikut diatas ringkasan dari penjelasan script yang kita buat. Sampai disini tutorial yang saya berikan, semoga tutorial Cara Membuat Aplikasi Menghitung Waktu Mundur dengan Javascript dapat bermanfaat bagi anda. Sekian dan terima kasih.

Tweet