HITUNG MUNDUR REDIRECT HALAMAN

HITUNG MUNDUR REDIRECT HALAMAN

- Februari 27, 2019

Halo sahabat harviacode.com.. 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.

redirect

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!doctype html>

<html>

    <head>

        <title>title</title>

    </head>

    <body>

        <div id="pesan"></div>

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

        <script>

            var url = "http://harviacode.com"; // url tujuan

            var count = 10; // dalam detik

            function countDown() {

                if (count > 0) {

                    count--;

                    var waktu = count + 1;

                    $('#pesan').html('Anda akan di redirect ke ' + url + ' dalam ' + waktu + ' detik.');

                    setTimeout("countDown()", 1000);

                } else {

                    window.location.href = url;

                }

            }

            countDown();

        </script>

    </body>

</html>

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.

DEMO

Mudah bukan, selamat mencoba. Jangan lupa komentarnya.. terima kasih telah berkunjung ke harviacode.com.

Komentar