HITUNG MUNDUR REDIRECT HALAMAN

Halo sahabat mohon maaf sudah lama vakum menulis dikarenakan kesibukan saya yang sangat padat belakangan ini. Pada kesempatan ini saya akan berbagi trik sederhana namun cukup menarik, yaitu hitung mundur redirect halaman.

Bagi kita sangat mudah untuk meredirect halaman. salah satu cara yang dapat kita lakukan adalah menggunakan fungsi window.location.href javascript. Namun bagaimana jika kita menghendaki redirect tidak langsung terjadi, akan tetapi ada jeda waktu dan jeda waktu tersebut harus tampil dalam hitungan mundur.

HITUNG MUNDUR REDIRECT HALAMAN

Untuk membuatnya cukup mudah. Kita akan mengkombinasikan fungsi window.location.href dengan decrement dan timeout. Biar tidak penasaran, berikut ini adalah kode untuk membuat hitung mundur redirect halaman.

<div id="pesan"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
            var url = "/kode"; // url tujuan
            var count = 5; // dalam detik
            function countDown() {
                if (count > 0) {
                    count--;
                    var waktu = count + 1;
                    $('#pesan').html('Website ini akan dialihkan kembali ke halaman login dalam <font size=5 color=maroon>' + waktu + '</font> detik.');
                    setTimeout("countDown()", 1000);
                } else {
                    window.location.href = url;
                }
            }
            countDown();
        </script>

Sedikit penjelasan. Pada kode diatas kita tentukan url tujuan dan jumlah detik jeda redirectnya. Kemudian kita panggil fungsi countDown(). Dalam fungsi tersebut jumlah detik akan di decrement (dilakukan pengurangan) hingga mencapai nol. Setelah jumlah detik mencapai nol, maka akan diredirect ke url tujuan. Silahkan klik link demo di bawah ini untuk melihat hasilnya.