Javascript Countdown With PHP Fall Back

Perhaps you have an event that happens on your webpage at a certain time, or you want to give a countdown to when the world ends. With this piece of JavaScript you can do this, and a PHP fall back will allow non JavaScript enabled browsers to still view the relevant information.

Let’s start with the JavaScript.

One of the issues here is that we don’t just want to display how much time is left, but also update that display continuously to provide our timer. There are two JavaScript functions that provide this ability, setTimeout which evaluates a function after a set amount of time and setInterval which continuously evaluates a function after a set amount of time.

Another issue we have to look out for is timing and accuracy. The examples on the internet all ran a small amount of code and then ran setTimeout after one second or very close to it. The problem is we don’t know exactly how long the code we are running takes, and this could and is different on every computer that runs the code.

So we need a slightly better approach. Here I’ve assigned a global variable which holds the time when the timer is complete and five times every second the display is updated to show the correct value. Perhaps we can take this further and set our interval uniquely each time based on millisecond comparison of the time? I leave that up to the reader.

The code is fairly self explanatory. The bulk of it is formating code to make the countdown look pretty. I’m not even sure it’s 100%. Onward with the code.

0) DisplayStr += days + ‘ Day’; if (days > 1) DisplayStr += ’s’; if (days > 0) DisplayStr += ‘, ‘; if (hours > 0) DisplayStr += hours + ‘ Hour’; if (hours > 1) DisplayStr += ’s’; if (hours > 0) DisplayStr += ‘, ‘; if (minutes > 0) DisplayStr += minutes + ‘ Minute’; if (minutes > 1) DisplayStr += ’s’; if (minutes > 0) DisplayStr += ‘, ‘; if (seconds > 0) DisplayStr += seconds + ‘ Second’; if (seconds > 1) DisplayStr += ’s’; // Display our pretty time string = DisplayStr; // Run this function five times every second + (secs) + “,\”" + (message) + “\”)”, 200);}

Now for the people who prefer a server side approach. This function pretty much mirrors the JavaScript approach. The one occlusion is the auto-updating feature of the client side script. Our only real recourse here is a meta refresh tag on the top of our page. But at the very least it provides the proper time.

Here is the code:

0) $displaystr .= $days . ‘ Day’; if ($days > 1) $displaystr .= ’s’; if ($days > 0) $displaystr .= ‘, ‘; if ($hours > 0) $displaystr .= $hours . ‘ Hour’; if ($hours > 1) $displaystr .= ’s’; if ($hours > 0) $displaystr .= ‘, ‘; if ($minutes > 0) $displaystr .= $minutes . ‘ Minute’; if ($minutes > 1) $displaystr .= ’s’; if ($minutes > 0) $displaystr .= ‘, ‘; if ($seconds > 0) $displaystr .= $seconds . ‘ Second’; if ($seconds > 1) $displaystr .= ’s’; return($displaystr);}?>

That’s it in a nutshell. You can see a working example of it here. I’d like to thank Robert Hashemain for his javascript countdown which served as the inspiration for mine.