Membuat Countdown Timer Dengan jQuery

jQuery Javascript

---

Sudah tidak asing lagi dengan jQuery, yang membantu programmer untuk menggunakan fungsi javascript dengan mudah. Kali ini saya ingin membagikan tutorial untuk membuat waktu hitung mundur menggunakan jQuery. Countdown timer biasanya digunakan pada situs-situs berbagi file yang mengharuskan pengunjungnya menunggu beberapa detik sebelum dapat mengunduh file yang diinginkan, dan masih banyak hal lain yang dapat dilakukan dengan countdown timer ini.

Bahan :

• component.css
• timer.min.js

Bila 2 file diatas sudah didownload jangan lupa untuk memanggil javascriptnya di atas </head> :

<script src="/timer.min.js" type="text/javascript"></script>

Kemudian untuk css bisa melalui internal ataupun external sama saja. Mari kita lanjutkan, untuk fungsi CountDown nya bisa dipasang pada halaman yang akan diberikan perhitungan mundurnya.

<script type='text/javascript'>
//<![CDATA[
var seconds = 10; // Berapa detik waktu mundurnya
function generate() { // Nama fungsi countdownnya
var id;
id = setInterval(function () {
if (seconds < 1){
clearInterval(id);

// Perintah yang akan dijalankan
// apabila waktu sudah habis

}else {
btn.style.display = "none";
menunggu.style.display = "inline";
document.getElementById('tunggu').innerHTML = --seconds;
}
}, 1000);}
//]]>
</script>
<button onclick="generate()" id="btn">Download</button>
<div id="menunggu">File otomatis terunduh dalam <b><span id="tunggu"></span> detik</b></div>

Semoga dapat membantu apa yang sedang Anda cari, dan apabila ada kendala silahkan tinggalkan di komentar agar saya dapat menjawabnya.