Client-Side vs. Server-Side Countdown Clock
Just a few days back, I made a countdown clock for shimmer. I first implemented it using Javascript but have now changed it to AJAX/PHP. A small problem with the Javascript implementation was that time left on the countdown would defer for each person viewing it. This was due to the fact that the clock drew its time from the local computer. Now with the AJAX/PHP implementation everyone would see the exact same time as the clock now draws time from my server’s time setting.
Creating a 2009 New Year Countdown
Hashemian’s Javascript Countdown uses the local computer time setting.
Here’s how I created an AJAX/PHP countdown that uses the server’s time setting.
First create a php file save it as countdown.php…
Remember to edit the lines that goes…
$target_date = mktime(hour, minute, second, month, day, year)
<?php
header("Expires: 0");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("cache-control: no-store, no-cache, must-revalidate");
header("Pragma: no-cache");// mktime(hour, minute, second, month, day, year)
$target_date = mktime(0, 0, 0, 1, 1, 2009);
$today_date = time();
$secs_left = $target_date - $today_date;if ($secs_left > 0) //not yet reach target date
{//1 day is 86400 seconds (60 * 60 * 24)
$days_left = floor($secs_left / 86400);
//1 hour is 3600 seconds (60 * 60)
$hrs_left = floor(($secs_left - $days_left * 86400) / 3600);
//1 minute is 60 seconds (duh…)
$mins_left = floor(($secs_left - ($days_left * 86400) - ($hrs_left * 3600)) / 60);$secs_left = $secs_left - ($days_left * 86400) - ($hrs_left * 3600) - ($mins_left * 60);
echo “<strong>”.$days_left.”</strong> day : “.
“<strong>”.$hrs_left.”</strong> hr : “.
“<strong>”.$mins_left.”</strong> min : “.
“<strong>”.$secs_left.”</strong> sec”;
}else //target date reached!
{
echo “2009 has arrived!”; //do something here…
}?>
Next create a html file and insert these few lines within the body tag
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
new Ajax.PeriodicalUpdater ( "countdown", "countdown.php", { method: "get", frequency: 1 } );
</script>
The ajax calls are done by using the prototype javascript framework (prototype.js)
Download the AJAX/PHP Countdown Clock
This is exactly what I was looking for. Thx. Would probably be good to add a comment to detail where the target date is set and in what order, that took a little figuring out for a non-programmer like me, but it did work.
Anonymous said this on April 11th, 2008 at 12:59 pm
glad it worked for you
appreciate the suggestion thank you! i have made the change.
pk said this on April 11th, 2008 at 11:28 pm
This was just what I was looking for Thanks!
Steve-O said this on April 22nd, 2008 at 8:19 am
Hi
I tried and failed.
As a test I uploaded your files to the server untouched and while I get no errors all I get is a blank screen. Any ideas please
Thanks
Eh
Hekler said this on May 22nd, 2008 at 11:29 pm
Server problem as it works on our other server. What could be wrong?
ALSO
Best way to format the output is…..?
Thanks again
Hekler said this on May 22nd, 2008 at 11:47 pm
Hi Hekler, what server are you running on? No visual errors might not mean no errors as server setting could be hiding the errors. I just tested the download file again on my apache server and it works fine.
pk said this on May 22nd, 2008 at 11:50 pm
try accessing countdown.php directly first instead of countdown.html
pk said this on May 22nd, 2008 at 11:52 pm
first make sure your server is able to run php files by creating a php file called index.php with this code…
< ?php
echo phpinfo();
?>
Try accessing the file to see if PHP info is displayed properly
pk said this on May 22nd, 2008 at 11:55 pm
Best way to format the output is…..?
Not sure what you mean sorry. please elaborate
pk said this on May 22nd, 2008 at 11:56 pm
So how much extra server load does this script produce? I have it running on a new site but a request every second to the server for every user seems like it could add up with 1,000 plus visitors a day - is there a way to grab the server time and then countdown on the client side? I am just looking for a way to have a countdown script based on server time with as little load as possible. Thanks!
layne said this on June 5th, 2008 at 10:50 pm
Ok i think it should be something like this, but don’t take my word for it…
There’s less then 40 characters. Each char is 1 byte so that 40 bytes for each request (every sec). Say your website is super high traffic, like ebay, and you have 50,000 users logged in at the same time.
40 bytes * 50,000 users = 2,000,000 bytes
2,000,000 bytes / 1024 (to get kilobyte) / 1024 (to get megabyte) = less then 2 megabytes!
So 50,000 users requesting this timer causes roughly the same load as 1 user downloading a 2 megabyte image. If you talking about server load, both apache and IIS can serve our way higher amount of data then that each sec. Serving web page is cheap, you should be more concern about the bandwidth. My hosting for example has a bandwidth limit so if 50,000 users login to this page for a week, my bandwidth would be used up and my site would go down :p
pk said this on June 6th, 2008 at 12:06 am
but realistically speaking average users don’t spend more then 15 minutes on a website and what’s the chance of 50,000 users being on? Yea so in most cases this script won’t cause any problem
cheers
pk said this on June 6th, 2008 at 12:21 am
right on - great example - in response to Hekler above - I am not sure what they were looking for in regards to formatting - but here is a rough example of making the clock show hh:mm:ss (im sure there is a better way, but this worked for me)
// pad the number with a zero if one digit
if (strlen($hrs_left)==1){$hrs_left= str_pad($hrs_left, 2, “0″, STR_PAD_LEFT); }
if (strlen($mins_left)==1){$mins_left= str_pad($hrs_left, 2, “0″, STR_PAD_LEFT); }
if (strlen($secs_left)==1){$secs_left= str_pad($hrs_left, 2, “0″, STR_PAD_LEFT); }
echo $hrs_left.”:”.$mins_left.”:”.$secs_left;
layne said this on June 6th, 2008 at 1:12 am
that’s a good way to format it
pk said this on June 6th, 2008 at 9:14 am
Really this is great script..
Many Many Thanks
Gour said this on June 13th, 2008 at 2:55 pm
Well this is good and was exactly what I was looking for. But somehow my plan was different - I dont know whether it was efficient or not but was very much practical.
I wanted to request server for timing - may be once every minute or 5 minutes and once it gets the server timing after that it will run on client with javascript every second updating it.
May be due to different CPU performances or may be something else… there are chances that it might go a second or couple up or down compared to server timing… and till that time - i.e. every 1 or 5 minutes it will update and the cycle of updating goes on every 5 minutes and timer never stops countdown goes on and the request are comparatively lower.
I’ll surely try to do it and once done will like to share with you all guys, I know the load is not much with this script too… but still I’m very conscious about saving a request or two to the server.
Anyways thanx a lot, this script will help me a lot in developing the other scripts too.
Swapnil Sarwe said this on August 14th, 2008 at 4:08 pm
The original motive of the script was to do a synchronization birthday count down. Therefore, even a 1 sec delay wasn’t acceptable.
However, depending on the purpose & usage, synchronization every hour would most likely be sufficient. The script can obtain the server’s time once an hour, then running the clock on client side. Every hour the script would just simple re-check the difference and update accordingly. That would significantly reduce any load.
Our PC bios keep time just like your digital watch, if any at all, it’s only a matter of a few secs lost/gain every year. I would think the counting speed of your server and your PC is the same - Both PHP and JavaScript (your browser) will obtain the time from the OS which obtains it from the bios. The only thing we really need here, is for all clients to obtaining the “starting” time from the same source, which is the server.
I guess I’ll update the script with an added variable allowing people to control how often this synchronization occurs. I might no do it soon unless anyone needs it urgently :p
pk said this on August 14th, 2008 at 5:38 pm
Nice work… thanks for posting it for us all
Jim Jam said this on September 9th, 2008 at 11:22 am