Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Waktu Tunggu Dalam Detik Menggunakan Javascript

Cara Membuat Waktu Tunggu Dalam Detik Menggunakan Javascript
Cara Membuat Waktu Tunggu Dalam Detik Menggunakan Javascript - Artikel ini menjelaskan cara membuat waktu tunggu dalam hitungan detik menggunakan javascript yang biasa ditemui dalam beberapa website.

Dalam beberapa keperluan kita sering menemukan sebuah halaman website yang menggunakan waktu tunggu beberapa saat agar bisa terbuka. Tujuannya juga bermacam-macam. Utamanya adalah agar pengunjung bertahan beberapa saat untuk membaca artikel atau hal lain.

Selain itu waktu tunggu ini juga bisa dimanfaatkan untuk membatasi waktu. Misalnya untuk aplikasi CBT berbasis web dimana waktu tunggu sebagai waktu/durasi yang dimiliki peserta ujian CBT.

Pada artikel ini duniatik.com akan berbagi tutorial Cara Membuat Waktu Tunggu Dalam Detik Menggunakan Javascript yang kode/scriptnya dijelaskan di artikel ini. Untuk memanfaatkan/menggunakan script ini anda diharuskan mempunyai pengetahuan dalam membuat kode HTML.

Cara Membuat Waktu Tunggu Dalam Detik Menggunakan Javascript


Buat script berikut ini dan diletakkan dalam tag <head>...</head>
Kode Javascript :
<script> 
var seconds_left = 5;
var interval = setInterval(function() {
   document.getElementById('timer_div').innerHTML = --seconds_left+" detik";

   if(seconds_left <= -0){   
      alert('Waktu habis');
      clearInterval(interval);
   }
}, 1000);
</script>
Selanjutnya pada kode HTML tambahkan kode berikut ini di dalam tag <body>...</body>
Kode HTML :
<span id="timer_div"></span>

Penjelasan

var seconds_left = 5;
Kode tersebut menjelaskan bahwa waktu tunggu yang ditentukan adalah 5 detik

var interval = setInterval(function() {
   document.getElementById('timer_div').innerHTML = --seconds_left+" detik";

   if(seconds_left <= 0){   
      alert('Waktu habis');
      clearInterval(interval);
   }
}, 1000);
Kode ini melakukan fungsi menghitung interval (setInterval) setiap 1 detik (1000) yang kemudian menuliskan hitungan mundur. Hasil perhitungan pengurangan 1 (--seconds_left) akan dituliskan pada tag span id=timer_div. Pada fungsi ini juga, disetiap terjadi interval akan dicek apakah variabel seconds_left sudah mencapai nilai kurang dari 0. Jika terpenuhi maka akan menampilkan dialog box Waktu Habis dan fungsi interval dihentikan sehingga perhitungan berhenti.

Demikianlah tutorial Cara Membuat Waktu Tunggu Dalam Detik Menggunakan Javascript. Semoga bermanfaat dan Salam TIK