How can I make a jQuery countdown

Question

I want a jQuery countdown:

1. It starts counting after page download finishes
2. After counting to 0 it redirects to a url

How i can do that?

Thanks in advance

Answer 1

$(function(){
  var count = 10;
  countdown = setInterval(function(){
    $("p.countdown").html(count + " seconds remaining!");
    if (count == 0) {
      window.location = 'http://google.com';
    }
    count--;
  }, 1000);
});

Answer 2

Are you sure, you want to use Javascript for this? You might just go with plain HTML:

<meta http-equiv="refresh" content="NUMBER_OF_SECONDS_TO_WAIT; URL=http://REDIRECT_URL/"&gt;

Put this in the header and the forward will even work on browsers without Javascript enabled.

Answer 3

I have create a countdown script using jquery, css and html. Here is my full source code. Demo link also available.

CSS Part: body{ font-family: verdana; font-size:12px; } a{text-decoration: none;color:blue;font-weight: bold;} a:hover{color: gray;font-weight: bold;} div#my-timer{width: 400px;background: lightblue; margin: 0 auto;text-align: center;padding:5px 0px 5px 0px;}

Jquery Part:

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        var settimmer = 0;
        $(function(){
                window.setInterval(function() {
                    var timeCounter = $("b[id=show-time]").html();
                    var updateTime = eval(timeCounter)- eval(1);
                    $("b[id=show-time]").html(updateTime);

                    if(updateTime == 0){
                        window.location = ("redirect.php");
                    }
                }, 1000);

        });
    </script>

Html Part:

<div id="my-timer">
        Page Will Redirect with in <b id="show-time">10</b> seconds        
</div>

Demo Link: http://demos.coolajax.net/php/redirect

I hope this code will be a helpful one for you.