Half Hour Countdown

Question

How would I make a countdown time for users to see that would countdown to every half hour. For example, if it were 10:05, I would want it to display a countdown that had 25 minutes remaining. I guess it would need to run off of the server time. Thanks for your help!

Also, would it be possible to refresh the page at the end of the countdown so the user could see the new one for the next half hour?

**Edit: Say they load the page at 9:55. I would like the countdown to display 5 mintues remaining. Then as soon as 10:00 were to come, I would like the page to refresh so that the countdown could display 30 minutes again.

Answer 1

Here's a function that does that:

function numMinutes() {
     return 30 - new Date().getMinutes() % 30;
}

That's JavaScript, so there's no server involved. To display a continuous countdown, you could do this (assuming you have an element with an ID of "countdown"):

setInterval(function() {
     var el = document.getElementById("countdown");
     while(el.childNodes.length > 0) el.removeChild(el.firstChild);
     el.appendChild(document.createTextNode(numMinutes().toString() + ' minutes left!'));
}, 1000);

Or, in (non-standard) shorthand:

setInterval(function() {
     document.getElementById("countdown").innerHTML = numMinutes().toString() + ' minutes left!';
}, 1000);