Membuat Coundown Timer Redirect dengan jQuery. Hai,
kali ini saya akan membuat artikel sederhana tentang jQuery, yaitu
bagaimana cara membuat Countdown Timer Redirect. Ya, seperti judulnya
yaitu Coundown yang artinya hitungan mundur, dan Redirect yang artinya
mengarahkan. Jadi nanti kita akan membuat sebuah kode untuk melakukan
hitungan mundur, dan jika hitungan mencapai 0 (nol) maka akan
menuju/mengarah ke URL yang sudah ditentukan.
Oke, langsung saja dimulai, karena ini adalah tutorial jQuery, maka anda harus download dahulu jQuery
disini.
Dan berikut ini adalah struktur foldernya:
Seperti pada gambar di atas, simpan hasil download jQuery tadi pada folder
js.
Selanjutnya kita buat file PHP baru dengan nama index.php, kemudian ketikkan kode di bawah ini:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<title>Countdown Timer Redirect by TUTORIALWEB.NET</title>
<body>
<div id="waktu"></div>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/count.js"></script>
</body>
</html>
|
Perhatikan pada baris ke-7, disana terdapat sebuah tag DIV dengan ID waktu, disanalah nanti akan ditempatkan Countdown-nya.
Pada baris ke-9 yaitu memasukkan jQuery yang sudah di download tadi.
Pada baris ke-10 adalah script yang kita buat di bawah ini.
Sekarang kita buat dokumen baru dan beri nama
count.js, kemudian ketikkan kode di bawah ini:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function counter(time, url){
var interval = setInterval(function(){
$('#waktu').text(time);
time = time - 1;
if(time == 0){
clearInterval(interval);
window.location = url;
}
}, 1000);
}
$(document).ready(function(){
counter(5, 'http://www.tutorialweb.net');
});
|
Simpan dengan nama
count.js di dalam folder
js.
Perhatikan pada baris ke-14 terdapat kode
counter(5, ‘http://www.tutorialweb.net’
;
terdapat angka 5 dan http://www.tutorialweb.net, dimana 5 adalah waktu
hitungan mundul, dan http://www.tutorialweb.net adalah link yang akan
dibuka ketika waktu sudah 0 (nol).
Sumber : tutorialweb.net
1 komentar:
All You Need to Know about the Casino Games to Play
What is the 크롬사이트번역 Best Casinos to Play in moonpay 2021? — Top Casinos in the World for 네이버 룰렛 Poker. Since Pokerstars was 생활 바카라 founded in 2014, poker has become one of the 안전 바카라 most
Posting Komentar