CODEWITHSUNDEEP
javascriptjquery
124697
124697

Reputation: 21893

How do i put a count down timer on my webpage

I want a count down timer of 60 seconds after which the page refreshes

edit: i need a visible count down on the webpage. but obviously the page cant refresh each second for the timer to change

Upvotes: 0

Views: 5458

Answers (5)

aorcsik
aorcsik

Reputation: 15552

Here is a simple recursive countdown function:

function countdown(time,endcallback,stepcallback)
{
    if (time == 0) endcallback();
    else {
        time--;
        stepcallback(time);
        window.setTimeout(function() {
            countdown(time,callback);
        },1000);
    }
}

countdown(60,function() {
    window.location.reload();
},function(time) {
    // display counter on page or do something else
});

EDIT: a bit more sexy this way :)

Upvotes: 2

Alec Smart
Alec Smart

Reputation: 95930

Use the following code:

http://javascript.internet.com/time-date/countdown-timer.html

You only need to modify the following

if((mins == 0) && (secs == 0)) {
        window.alert("Time is up. Press OK to continue."); // change timeout message as required
        // window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
    }

to something like:

if((mins == 0) && (secs == 0)) {
        window.location.reload();
    }

Upvotes: 0

Alex K
Alex K

Reputation: 7217

<div id='countdown'>60</div>

$(function() {
    var cd = $('#countdown');
    var c = parseInt(cd.text(),10);
    var interv = setInterval(function() {
        c--;
        cd.html(c);
        if (c == 0) {
            window.location.reload(false);
            clearInterval(interv);
        }
    }, 1000);
});

sorry didn't notice you need a visible counter at first time.. so i edited answer

working demo

Upvotes: 0

Ciaran
Ciaran

Reputation: 1904

Use a meta refresh: http://en.wikipedia.org/wiki/Meta_refresh

Be warned that this is a bit of a hacky method, and there is probably a more elegant solution, depending on what you are trying to achieve.

Upvotes: 0

Miki
Miki

Reputation: 7188

Is using <META HTTP-EQUIV="refresh" CONTENT="60"/> in the <head> section of your html document sufficient? You can read more about it here

Upvotes: 1

Related Questions