View Full Version : Countdown timer problem

Jan 19th, 2010, 06:56 PM
Hi, Im looking for a simple script or solution that will allow a timer to count down 48hrs from a set time of the day and then after that reset and start the process again.

For Example:
Order within 23 hours 6 minutes
for Delivery Tommorow

The problem I have got is im not sure how to create a timer that does not reset every time you refresh the browser etc.

Any hep would be great as im stumped with this one!


Philip M
Jan 19th, 2010, 07:40 PM
Try this:-

<script type = "text/javascript">

<script type = "text/javascript">
function getSeconds() {
var now = new Date();
var time = now.getTime(); // time now in milliseconds
var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate()+1,0,0,0); // midnight 0000 hrs
// midnight - change time hh,mm,ss to whatever time required, e.g. 9,15,0 (0915)
var ft = midnight.getTime() + (86400000*2); // add two days
var diff = ft - time;
diff = parseInt(diff/1000);
if (diff > 86400) {diff = diff - 86400}
startTimer (diff);

var timeInSecs;
var ticker;

function startTimer(secs){
timeInSecs = parseInt(secs);
ticker = setInterval("tick()",1000);
tick(); // to start counter display right away

function tick() {
var secs = timeInSecs;
if (secs>0) {
else {
clearInterval(ticker); // stop counting at zero
//getSeconds(); // and start again if required

var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;
var result = ((hours < 10 ) ? "0" : "" ) + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins +" minutes"

document.getElementById("countdown").innerHTML = "Order within " + result + " for delivery tomorrow";



<body onload = "getSeconds()">

<span id="countdown" style="font-weight: bold;"></span>


Quizmaster: Which of these two boats is a palindrome - kayak or canoe?
Contestant: Canoe.

Old Pedant
Jan 19th, 2010, 07:58 PM
Ummm...Philip, by my reading that code does indeed "reset every time you refresh the browser". Which he specifically asked for it *not* to do.

Now, granted it uses the same baseline time on each refreseh...*UNTIL* you cross to the next day.

But even so, it assumes you know that all users will have the same baseline time.

Monster: There's no full blown answer to this, but *if* your users allow cookies, then you could store that END time in a cookie and reload it on each refresh. Then you just calculate seconds from current time until the end time and start your display at that point.

Alternative: If you have a server side system (PHP/ASP/JSP/etc.) and IF your users are identifiable (e.g., they sign it), then you could store each user's end time in a DB and reload it from the server on each refresh.

Philip M
Jan 19th, 2010, 08:40 PM
But even so, it assumes you know that all users will have the same baseline time.

Well you could change it to UTC/GMT so that all users have the same reference time.

But in any case, it is a bit pointless. Why not simply say "Order by 1600 for next-day delivery" or whatever. The counter simply serves to distract (and perhaps annoy) the customer.

Old Pedant
Jan 19th, 2010, 08:43 PM
You know, I misread him. I think your answer is more correct than mine.

When he said "set time of day" I was thinking he meant a time of day related to when the user first hits the page.

But I think you are right.

Ignore my babbling.