Membuat Hitung Mundur Dengan JQuery

Membuat waktu yang hitung mundur di Website adalah menggunakan JQuery. Kawan tentu saja sering melihat hitung mundur atau Countdown Timer. Apalagi kawan yang sering melakukan download aplikasi baik itu PC ( Personal Computer ) ataupun SmartPhone ( Ex: Android). Sering melihat hitung mundur diwebsite tersebut agar bisa mendapatkan link download aplikasi yang kita inginkan.

Baiklah, pada kesempatan kali ini saya akan membagikan tutorial membuat hitung mundur dengan JQuery yang tentunya kawan bisa melakukannya, karena kawan hanya tinggal copy paste dan treeen eng eenggg... jadi.
Pertama kita harus memiliki link JQuery atau dalam kata lain memasukkan JQuery kedalam website kita. Kawan bisa memakai link dibawah ini.

Link JQuery

https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

Sehingga nanti untuk kode javascriptnya akan menjadi seperti ini.

JavaScript JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Setelah mendapatkan link JQuery tersebut langkah selanjutnya adalah membuat Javascript untuk hitung mundur pada saat user mengakses halaman tersebut. Kawan bisa mengcopy script ini dan paste dihalaman HTML kawan.

Javascript

<script type="text/javascript">
var timerku = 5; <!--script di mulai dari angka 5 bisa di sesuai kan-->
$(document).ready(function() { startCountdown(); });
function startCountdown() {
if((timerku - 1) >= 0){
timerku = timerku - 1;
$("#tunggu").html('Please wait <font style="font-size:125%;"> <b>' + timerku + '</b></font> second..!');
setTimeout(startCountdown, 1000);
}
else{
$("#tunggu").html('<button class="btn btn-success" style="text-align: right" onClick="window.location=\'<?php echo $redirect ?>\'" target="_blank">Skip Ad</button>'); <!--di sini link setelah tulisan countdown-->
}
}
</script>
<div id="tungguyabro"></div>

Setelah melakukan beberapa langkah diatas, maka langkakh selanjutnya kita menggabung semua kode diatas menjadi seperti dibawah ini.

HTML Lengkap

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var WaktunyaBro = 5; <!--script di mulai dari angka 5 bisa di sesuai kan-->
$(document).ready(function() { startCountdown(); });
function startCountdown() {
if((WaktunyaBro - 1) >= 0){
WaktunyaBro = WaktunyaBro - 1;
$("#tungguyabro").html('Please wait <font style="font-size:125%;"> <b>' + WaktunyaBro + '</b></font> second..!');
setTimeout(startCountdown, 1000);
}
else{
$("#tungguyabro").html('<button class="btn btn-success" style="text-align: right" onClick="window.location=\'<?php echo $redirect ?>\'" target="_blank">Skip Ad</button>'); <!--di sini link setelah tulisan countdown-->
}
}
</script>
<div id="tungguyabro"></div>

Simpan dan jalankan kode diatas. Coba lihat apakah hitung mundur diwebsite kawan sudah berjalan atau tidak. Jika belum jalan coba lihat kembali kode kawan mungkin ada salah dalam menyalin kode diatas.

Sekian artikel tentang tutorial web tentang Membuat Hitung Mundur Dengan JQuery. Semoga bisa bermanfaat bagi kawan, dan jika kawan tidak keberatan silahkan bagikan artikel ini dengan klik tombol bagikan di bawah. Salam dan terima kasih :)