Penghitung waktu mundur.? Ya, kali ini kita akan membuat sebuah aplikasi yang sangat sederhana, yaitu membuat Aplikasi Penghitung Waktu Mundur. Jadi, yang dimaksud adalah kita dapat menghitung waktu secara mundur dari waktu yang telah di tetapkan. Dan bahasa pemrograman yang digunakan adalah Javascript. Oke, langsung saja di ikutin langkah demi langkah :
<div id="status"></div>
<script type="text/javascript">hitungMundur(5, "status");</script>
Nah, pada bagian ini, kita menggunakan tag <div> untuk menampung hasil dari perhitungan nanti. Dan kita membuat sebuah fungsi nantinya yaitu hitungMundur(). Angka 5 adalah angka yang telah di tentukan dari awal, jadi ada dapat menggantinya sesuai dengan keinginan.
<script type="text/javascript">
function hitungMundur(secs, elem)
{
var element = document.getElementById(elem);
element.innerHTML = "Mohon tunggu sebentar" +secs;
if(secs < 1) {
clearTimeout(timer);
element.innerHTML = '<h2> Hitung Mundur Selesai </h2>';
element.innerHTML += '<a href="">Clik</a>';
}
secs--;
var timer = setTimeout('hitungMundur('+secs+', "'+elem+'")', 1000);
}
</script>
Script diatas, adalah fungsinya yang akan memproses seluruhnya dari aplikasi ini. Saya harapkan disini anda paham maksud dari scriptnya, untuk memahaminya, anda dapat belajar mengenai dasar-dasar dari javascript ini. Oh ya, maksud dari angka 1000 itu adalah 1 detik ya :v. Dan berikut script lengkap dari keseluruhannya :
<script type="text/javascript">
function hitungMundur(secs, elem)
{
var element = document.getElementById(elem);
element.innerHTML = "Mohon tunggu sebentar" +secs;
if(secs < 1) {
clearTimeout(timer);
element.innerHTML = '<h2> Hitung Mundur Selesai </h2>';
element.innerHTML += '<a href="">Clik</a>';
}
secs--;
var timer = setTimeout('hitungMundur('+secs+', "'+elem+'")', 1000);
}
</script>
<div id="status"></div>
<script type="text/javascript">hitungMundur(5, "status");</script>
Coba anda simpan dengan nama hitungmundur.html Maka akan menghasilkan seperti gambar berikut :
Dapat anda perhatikan, jika selesai melakukan perhitungan maka akan muncul pesan seperti gambar diatas. Sampai disini tutorial Cara Membuat Aplikasi Penghitung Waktu Mundur Menggunakan Javascript, semoga bermanfaat. Any Question.?? Please Comment in below or Contact Admin.! Thank's
Perkenalkan saya blogger pemula, yang ingin belajar lebih dalam mengenai blogger dan internet ini.
Related Post
Cara Membuat Autocomplete Search dengan JQuery, PDO, dan MySQL
Cara Membuat Autocomplete Search dengan jQuery, PDO dan MySQL - Salam buat teman-teman sekalian, p
Tutorial Lengkap javascript
Pada tutorial ini, kita sedikit membahasa mengenai javascript. Apa itu javascript.? Javascript a
ConversionConversion EmoticonEmoticon