PHP-Javascript Countdown Script With Timezone Setting
COMMON PROBLEM WITH MOST COUNTDOWN SCRIPTS
Marketers all over the Internet has been using countdown scripts and pre-launches to build anticipation. And it’s a great strategy to build interest around your product while creating buzz.
I am sure you can find a few if you Google for it. But here’s the problem with most of those scripts. It runs on your visitor’s computer clock…
You may have set your countdown at a specific date and time like 10 September 2008, 9.00 am. But you didn’t set the timezone? Without that answer, a visitor in Sydney, Australia may see the countdown ending 17 hours earlier than people in New York, USA. The guy in Australia could see that the countdown ended when your website is not ready yet — you don’t want that!
The safest method for this is to make sure that your script uses the date and time of your server, one specific clock that everyone refers to, and not time from the visitors’ personal computer. So some server-side programming like PHP is required.
A PHP-JAVASCRIPT COUNTDOWN SOLUTION
Alright, obviously I have a solution for you.
Before I get into the details, let me first tell you how it works.
I am assuming that you are total newbie at this. So please bear with all the details that I am about to share. With any server-side programming like PHP, ASP, Perl and the rest, the data that you send to the web browser does not always have to be a HTML.
For example, I can write a PHP script to read actual binary data from an image file and send it to the browser. For the browser to know that what you are sending is not HTML, all that I need to do is just add some extra HTTP header information. For a JPEG image file, in PHP code, it will be something like this…
header("Content-type: image/jpeg");Now, I can do the same when I want to send in Javascript instead of HTML…
header("Content-type: text/javascript");We all know that you can use Javascript to create an animated countdown on your website. The problem is that when we choose the date and time to countdown to, the Javascript will refer to date and time on your computer, and not from the server
Now that we know PHP can deliver Javascript codes, we can first let PHP get the date and time from the server, generate the Javascript, and then deliver it to the browser.
Assuming that you are building a web page to display the countdown. Let say that it’s index.html. Inside that file, we can call our PHP-Javascript using a simple code like this…
<SCRIPT language="JavaScript" SRC="http://domain.com/countdown.php"></SCRIPT>Can you see that we are actually calling a PHP file? The external Javascript is actually countdown.php.
Alright, now that you know how to call the script from your web page, the next thing is about what is in our countdown.php?
Without going into much detail, so here’s the script.
HOW TO USE THE COUNTDOWN SCRIPT
There are two important information that you need to prepare to make the countdown script works. First is the date and time that you are counting down to. Second is the timezone you want to use as your clock.
When you have those two, all that you need to do is include those two information when you call the script from your web page. Here’s an example.
<SCRIPT language="JavaScript" SRC="countdown.php?timezone=Asia/Kuala_Lumpur&countto=2020-01-01 00:00:00&do=t&data=HAPPY NEW YEAR MALAYSIA!"></SCRIPT>You can put that code anywhere between your <BODY>…</BODY>. It should work just fine.
Just a little explanation… In the above example, I have set the timezone to Asia/Kuala_Lumpur. It’s a city in Malaysia, is the South East Asia. You can choose from other timezones.
Some common ones would something like:
US/Eastern
US/Pacific
US/Central
Europe/London
Asia/Hong_Kong
Asia/Tokyo
Australia/Sydney
Australia/MelbourneMore list can be found at http://www.php.net/manual/en/timezones.php
After that, I put in the date and time that I am counting down to. You have to use this format – “YYYY-MM-DD HH:MM:SS”. It will not work if you got any of these wrong.
You also need to define what you want to happen after the countdown is over. If you look through the short code again, you will find do=t. The script takes in either a “t”, “u” or an “r”. For text or redirection, you need to supply extra information using the data variable.
do=u&data=[URL], to redirect to a specific URL.
do=t&data=[text], display a text.
do=r, reload the web page, data variable is not need.
CUSTOMIZING YOUR COUNTDOWN LOOK AND FEEL
For this, you need to use CSS. The countdown timer is built with a <div id=’cd’></div>. The DIV has in ID, which is ‘cd’. So now you can also apply some CSS to the element.
You can simply put CSS definition in your web page between the <HEAD>…</HEAD>. A simple code would be something like:
<style>
#cd {
width: 200px; height: 50px;
margin: auto; padding: 5px;
font-family: Arial; font-size: 18pt;
}
</style>You can go wild with the CSS. Some really crazy things that you can do is like assigning a background graphic, make it float on a special layer, or anything else you can think of.
WARNING…
This script is not created with proper error trapping. If it’s not working, then something is wrong with your implementation. And I can’t provide support for it either. Oh yeah, it’s poorly documented to.
So use at in anyway you want but don’t bug me with it.
Alright, I guess that’s all then… go wild!!
This entry was posted
on Thursday, September 11th, 2008 at 5:01 am and is filed under Web Tricks.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Great Stuff
thanks
Thanks for the free scripts..
~maverick~
http://www.pjlighthouse.com
I’ve been looking for this for a very long time, it’ll be great to have it on my “time limited” promotion.
Thank you!
Eric
thanks for the great script
Good stuff!
Love it, thank you.
I have been searching for the countdown script in google, now i got Thanks alot for the script
The script didn’t work out-of-the-box because many PHP tags were open. After closing them (and sometimes opening) them it works fine.
Thanks for the script,
Roy.
just what i was looking for but there is an error:
do=u&data=[URL], to redirect to a specific URL.
u actually isn’t defined but r is and instead of reload it is actually for redirect.
so i made it
do=r&data=[URL], to redirect to a specific URL
it works
go to my site at 1-1-09 EST
Justo lo que estaba buscando.
Mil gracias.
[...] 22. Create a Countdown Using PHP [...]
This script is brilliant.
I’m trying to use multiple calls on a page, and it’s only returning the latest incident. Any suggestions?
Ta.
Is there a way to embed it in a website? specifically Livejournal? Thanks
Thanks!
Is perfect. Although how can i remove it from the i need the count in line with some other text.
Thanks a billion !!!
Your solution solved my problem.
I appreciate your effort.
Thanks again.
not working on IE 6.0.
it reported “unterminated string constant” error
Hi I have a small question and was wondering if you would be able to help me out.
I am wanting to set the counter for 8 hours.
Software on the server automatically creates static pages from sql database every 8 hours. So if it is possible to replace xxxx-xx-xx with current/today’s time and set the clock to +4 hours of current time.
Do you think its possible? Any tips would be very much appreciated.
Thanks.
Hi,
I tried using direct time input after stripping the date, something like
However it does not produce anything.
Do you know how it would be possible to make this work?
Thanks again.
hum.. seems like the input does not allow any url.. Here is the sample I was referring to
SRC=”/test/countdown/countdown.php?countto=23:00:00
Very nice information. Thanks for this.
Can you please post the countdown.php exactly as seen in the demo
any one who has this working 100% could they please send me the countdown.php hackalive(at)gmail(dot)com
hello
I need more than one page, right now I am only getting one clock at a time, how can a multiple clocks be configured?
Sincerely
Mordechay
I mean: I need more than one clock per page, can it be done?
Sincerely
Mordechay
if you know how multiple countdowns can be done please e-mail me at: tamord@gmail.com
Thanks
Well, I found most the php-part pretty boring and useless.
If I got right the idea, you use the php to get the server time, and start counting using the javascript on the screen. Awful. Then you certainly dont need all that php stuff including the difference function and all those mktime variables.
I cut ‘em out, it still works same way )))
Dont waste your time bro next time, start counting in a more efficient way
Using server time instead of client machine time will create a single point of reference for everybody, no matter where they are in the world. Yep, the JS is for the animation and the PHP is for deriving server time.
As I mentioned, the objective for this is so that people in Australia (or other locations) will more or less see the same countdown as the people in China, or any parts of the world for that matter.
Read about the problems again above… maybe you’ll understand the reason for this script.
And of course, there other ways to do this – Flash, Java Applet, Ajax … this is just an option of how I would tackle the problem.
Again, read about the problem…
your 5 star.
take it.
best in my favorite thanks a lot.
sorry i cant donate it very simple and best.
your 5 star.
take it.
best in my favorite thanks a lot.
sorry i cant donate it very simple and best.
your 5 star.
take it.
best in my favorite thanks a lot.
sorry i cant donate it very simple and best.
gostaria de saber se o IPN PHP Script para Download
se é possivel usar ele em sites brasileiros?
se possivel me mande um e-mail,desde ja agradeço!sou visitante assiduo do seu site,esta de parabens tem otimos assuntos,olhe eu preciso muito deste script se possivel me ajude.
obrigado pela atenção.
Script Looks Great.
Do you have any idea as to how to modify the script to track recurring weekly events?
ie Church Service at 8:30, 10:00 and 11:30 each Sunday
I would like the timer to countdown to the first service then display service in progress for 1 hour then start counting down to the next service and so on.
Then repeat this for the next Sunday 1 hour past the last service.
I would also like to put custom text for the countdown for each service as well as custom text while the service is on (ie for the 1 hour).
Any guidance would be MUCH appreciated.
Thanx!
Wow!,
Amazing to be here.Awesome work buddy.
Great Script but is there a way for the script to reset itself midnight everyday. I just want it to countdown each day.
Thanks for the script.
Decent enough script …however the javascript needs a bit of tweaking to work correctly if you want a fairly accurate countdown. You can’t depend on setOffset / setInterval to keep track of the time as it fairly quickly driftsoff the correct time …. just to prove that, open the same page up within several browser windows and marvel at how quickly they go out of sync! Ok, a refresh sorts them out, but not the ideal solution.
To correct this you need to store a reference to the start time (when the javascriptscript first gets called) by creating a new date object and getting the time from it and then for each call of the do_cd() function calculate the time difference between the javascript start time and a new time object, calculate the elapsed time and subtract that from the original php countdown reference to get a true value that can be displayed. Don’t do that accumulatively though, always subtract the elapsed time from the original countdown time. Then you’ll have self-correcting time values (it may vary between browsers by a tiny amount but it will keep them within a second of the correct value).
Here’s my quick fix (room for improvement!)
// Here’s where the Javascript starts
countdown = ;
startcountdown = ;
var start = new Date().getTime();
// and then at the end of the do_dc() function
// remove the line countdown = countdown – 1;
// and replace with
var elapsedSeconds = (new Date().getTime() – start) / 1000;
countdown = startcountdown – elapsedSeconds;
doh… the PHP bits in my post have disappeared! …
here’s how those first lines should look
countdown = <?PHP echo $diff ?>;
startcountdown = <?PHP echo $diff ?>;
that’s all cool & great js countdown, thank you very much for sharing.
Can you give me favor by sharing this script on my JavaScript library?
Awaiting your response. Thank
Hi, thanks for the script.
Do you think is possible to have the output displayed in
a different language?, ie: “days” to “giorni” (italian)
I did not look well before, got the solution.
around line 152 in the php script change those two lines:
if (dd > 1) { return (dd+” giorni “+hh+”:”+mm+”:”+ss); }
else { return (dd+” giorno “+hh+”:”+mm+”:”+ss); }
Thank you
[...] PHP-Javascript Countdown Script With Timezone Setting 11 Sep 2008. The external Javascript is actually countdown.php…. I love invoicing with CurdBee · OptinDesign.com – Free Squeeze Page Templates · DIY PHP-Javascript Countdown Script With Timezone Setting [...]
This is FANTASTIC! THANKYOU VERY MUCH for creating it. I have a good use for it this next couple of weeks, and it’s working great. MUCH appreciated.
finally… been looking for this for at least 40 hours continuously, haven’t really slept at all in the meantime; just trying to get this done and your solution works. simply as that. with a little bit of css tweaking I’ve managed to get it to look the part as well. so Thank You Very Much, you should put up a paypal donate button, once my website starts making money i’ll be more than happy to thank you for this with a little contribution
thanks again, you have saved my sanity
Hi guyes, i have figured out better solution using this same countdown but with the combination of AJAX and time synchronization and its working very well I think. In my solution you can also set how many times in 1 minute you wanna synchronize the time with server and etc and everything is handled by AJAX functions.
Hello, great script and thank you for sharing this….
Here is my problem though:
I’ve replaced the background image [back.jpg] with another one [needed it to blend with my website]. My background image is 193px * 94px and I had to reduce the font size to make it fit inside the background image. As a result, the text [countdown information] appears at the top of my image, when I want it to be centered. I tried changing the margins, but the image then moves with the text. The vertical alignment doesn’t work.. any idea how I can move the text without moving the image?
Thank for your help…
Cheers;
C
Hello, great script and thank you for sharing this….
Here is my problem though:
I’ve replaced the background image [back.jpg] with another one [needed it to blend with my website]. My background image is 193px * 94px and I had to reduce the font size to make it fit inside the background image. As a result, the text [countdown information] appears at the top of my image, when I want it to be centered. I tried changing the margins, but the image then moves with the text. The vertical alignment doesn’t work.. any idea how I can move the text without moving the image?
Thank for your help…
Cheers;
C
Dude, your script excels in awesomeness.
It mixes absolutely every other countdown scripts functionalities we can find here and there, but in only one tiny call and one small file.
I’m forever grateful for your share.
(Ain’t that a cheerful thanks?)
[...] PHP-Javascript Countdown Script With Timezone Setting 11 Sep 2008. The external Javascript is actually countdown.php…. I love invoicing with CurdBee · OptinDesign.com – Free Squeeze Page Templates · DIY PHP-Javascript Countdown Script With Timezone Setting [...]
PHP-Javascript Countdown Script With Timezone Setting ……
[...]gostaria de saber se o IPN PHP Script para Download se é possivel usar ele em sites brasileiros? se possivel me mande um e-mail,desde ja agradeço!sou visitante assiduo do seu site,esta de parabens tem otimos assuntos,olhe eu preciso muito deste sc…
Thanks for the server-side version. Just what I have been looking for.
Hi, great thanks for this scripts
It’s my first time to ask a help on the net for a code.
I have a problem about this code .
the problem is, when I want to repeat this timer on a while loop the timer increase by (4 or the loop number ) I don’t know why it makes that
I did a while loop to fetch a products form the database for an auction idea
if any one can help me please ……………………..
The code
index.php :
Untitled Document
#cd {
margin: auto;
height: 50px;
width: 450px;
font-family: “Courier New”, Courier, mono;
font-size: 24pt;
color: #000;
text-align: center;
font-weight: bold;
background-image: url(back.jpg);
vertical-align: middle;
}
Counting Down to New Year’s 2020
According to the time at Africa/Cairo.
<?php
$i=1;
while($i<=4)
{
$i++;
}
echo"do_cd();
“;
?>
The countdown.php(which I have included before):
$dateto) {
$years_difference–;
}
if (mktime(date(“H”, $dateto), date(“i”, $dateto), date(“s”, $dateto), date(“n”, $dateto), date(“j”, $dateto), date(“Y”, $dateto)-($years_difference+1)) > $datefrom) {
$years_difference++;
}
$datediff = $years_difference;
break;
case “q”: // Number of full quarters
$quarters_difference = floor($difference / 8035200);
while (mktime(date(“H”, $datefrom), date(“i”, $datefrom), date(“s”, $datefrom), date(“n”, $datefrom)+($quarters_difference*3), date(“j”, $dateto), date(“Y”, $datefrom)) < $dateto) {
$months_difference++;
}
$quarters_difference–;
$datediff = $quarters_difference;
break;
case "m": // Number of full months
$months_difference = floor($difference / 2678400);
while (mktime(date("H", $datefrom), date("i", $datefrom), date("s", $datefrom), date("n", $datefrom)+($months_difference), date("j", $dateto), date("Y", $datefrom)) 7) { // Sunday
$days_remainder–;
}
if ($odd_days > 6) { // Saturday
$days_remainder–;
}
$datediff = ($weeks_difference * 5) + $days_remainder;
break;
case “ww”: // Number of full weeks
$datediff = floor($difference / 604800);
break;
case “h”: // Number of full hours
$datediff = floor($difference / 3600);
break;
case “n”: // Number of full minutes
$datediff = floor($difference / 60);
break;
default: // Number of full seconds (default)
$datediff = $difference;
break;
}
return $datediff;
}
// getting Date difference in SECONDS
$diff = datediff(“s”, $count_from, $countdown_to);
?>
// Here’s where the Javascript starts
countdown = ;
// Converting date difference from seconds to actual time
function convert_to_time(secs)
{
secs = parseInt(secs);
hh = secs / 3600;
hh = parseInt(hh);
mmt = secs – (hh * 3600);
mm = mmt / 60;
mm = parseInt(mm);
ss = mmt – (mm * 60);
if (hh > 23)
{
dd = hh / 24;
dd = parseInt(dd);
hh = hh – (dd * 24);
} else { dd = 0; }
if (ss < 10) { ss = "0"+ss; }
if (mm < 10) { mm = "0"+mm; }
if (hh 1) { return (dd+” days “+hh+”:”+mm+”:”+ss); }
else { return (dd+” day “+hh+”:”+mm+”:”+ss); }
}
}
// Our function that will do the actual countdown
function do_cd()
{
if (countdown < 0)
{
// redirect web page
document.location.href = “”;
// change text
document.getElementById(‘cd’).innerHTML = “”;
}
else
{
document.getElementById(‘cd’).innerHTML = convert_to_time(countdown);
setTimeout(‘do_cd()’, 1000);
}
countdown = countdown – 1;
}
at index.php
this statement should be between the while bracts:
echo”do_cd();
Hi everyone,
When I downloaded the scripts, there were some faults and I don’t manage to make it work.
Can someone send me the correct scripts?
I already spent 3 hours and I’m really struggling…
I would really really appreciate your help!!
my email is: mpcd4@hotmail.com
Thank you very much
It just doesn’t seem to work for me. If anyone has a working .html with the working .php files, kindly correspond with me at deusexfan@hotmail.com. I’ve spend close to 10 hours and I’m new to PHP so any form of help will be duely appreciated. Thank you ^_^
I managed to get a working script. If anyone needs it let me know!
Pleasant place! The posting will be filled with guider intelligence as well as really constructive. Many thanks intended for expressing using additional folks.
Hi…
Thanks for the free scripts. I have one issue this script. Timer various different browser. Can u help anyone.
good post,,good script,,good blog…can help anybody…
Thanks very much for the script, I added it to a domain that’s been in parking mode for a while and now it’s ticking down.. 40 days from now the site will just have to get ready!!!
hi this is great script. Its helps many programmers.
its working well for a single countdown timer but any one knows how to call this for many times in a page or in loop.
This question already also but still no answer for this. IF any one got this please share with me in ‘pragal86(at)gmail(dot)com’
Hi…
Thanks for the free scripts. I have one issue this script. Timer various different browser. Can u help anyone