Membuat Coundown Timer Redirect dengan jQuery

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:

<html><head> <title>Countdown Timer Redirect by TUTORIALWEB.NET</title></head><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>

<html>

<head>

<title>Countdown Timer Redirect by TUTORIALWEB.NET</title>

</head>

<body>

</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:

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'); });

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

Menu Melayang

Membuat Coundown Timer Redirect dengan jQuery

Blog Post

Related Post

Back to Top

Cari Artikel

Popular Post

Script Silsilah Keluarga Berbasis Web dengan Mysqli, Bootstrap dan PHP

Cara membuat script captcha dengan php GD

Menampilkan Data dari Database MySQL Tanpa Loading Dengan jQuery

Ebook Tutorial VB.NET ( Daging semua )

Cara memasukkan code php ke dalam webpage .html

Daftar Link

Label

Arsip Blog

Link Setting

Copyright