JQuery: Cara Mudah Redirect Halaman dengan Interval Waktu

Seringkali kita menemukan pada suatu situs web peringatan semacam “You will be redirected to actual page after X seconds” atau “Anda akan diarahkan ke halaman sebenarnya dalam waktu X detik“. Peringatan semacam itu sering digunakan untuk memberikan ruang sementara pada iklan atau poster tertentu sebelum pengunjung disajikan halaman sebenarnya yang dituju. Oleh karena itu, kita sering menemuinya dalam situs-situs yang menyediakan layanan berbagi file (file sharing) maupun unduhan gratis seperti 4shared dan indowebster.

Nah, lalu bagaimana membuatnya? Dalam tutorial singkat ini, akan dicontohkan bagaimana membuat redirect halaman tersebut menggunakan JQuery. Kita akan memanfaatkan fungsi setInterval() yang dimiliki oleh JQuery. Fungsi ini akan mengatur penundaan (delay) dengan interval waktu tertentu. Satuannya dalam miliseconds.

redirect-jquery

Perhatikan potongan program berikut ini.

  1. <head>
  2. <title>Redirect Halaman dengan JQuery</title>
  3. <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  4. $(document).ready(function(){
  5. window.setInterval(function () {
  6. var sisawaktu = $("#waktu").html();
  7. sisawaktu = eval(sisawaktu);
  8. if (sisawaktu == 0) {
  9. location.href = "http://achmatim.net/";
  10. } else {
  11. $("#waktu").html(sisawaktu - 1);
  12. }
  13. }, 1000);
  14. });
  15. </script>
  16. <style type="text/css">
  17. body {
  18. font-size:12pt;
  19. font-family:verdana;
  20. background-color:cyan;
  21. }
  22. #waktu {
  23. font-size:25pt;
  24. color:red;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <h1>Anda akan diarahkan ke halaman sebenarnya dalam waktu <span id="waktu">10</span> detik</h1>
  30. </body>
  31. </html>

 

Pada potongan contoh program diatas terlihat bahwa sebelum menuju ke halaman sebenarnya yaitu http://achmatim.net/ ditampilkan pesan “Anda akan diarahkan ke halaman sebenarnya dalam waktu 10 detik” dimana waktu berjalan mundur untuk setiap detik. Pada saat sudah mencapai nilai 0 maka halaman akan di-redirect ke alamat http://achmatim.net.

Anda juga dapat melihat demo program diatas.

Semoga bermanfaat.

Comments
  1. 7 months ago
  2. 7 months ago
  3. 2 months ago
  4. 2 months ago
  5. 2 months ago

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>