PHP-Javascript Countdown Script With Timezone Setting

[ DEMO ] [ DOWNLOAD SCRIPT ]

Get Offer Countdown
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.

[ DEMO ] [ DOWNLOAD 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/Melbourne

More 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!!

Get Offer Countdown

[ DEMO ] [ DOWNLOAD SCRIPT ]

 

65 Responses to “PHP-Javascript Countdown Script With Timezone Setting”

  1. Bernie Beleskey said:

    Great Stuff
    thanks

  2. maverick said:

    Thanks for the free scripts.. :)
    ~maverick~
    http://www.pjlighthouse.com

  3. Eric said:

    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

  4. muhaimin said:

    thanks for the great script

  5. Joe said:

    Good stuff!
    Love it, thank you.

  6. Keerthi teja said:

    I have been searching for the countdown script in google, now i got Thanks alot for the script

  7. Roy said:

    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.

  8. James said:

    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 :)

  9. Francisco said:

    Justo lo que estaba buscando.

    Mil gracias.

  10. Essectial PHP Techniques for Web Designer and Developers | Desizn Tech said:

    [...] 22. Create a Countdown Using PHP [...]

  11. Rich said:

    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.

  12. Joan said:

    Is there a way to embed it in a website? specifically Livejournal? Thanks :)

  13. James said:

    Thanks!

    Is perfect. Although how can i remove it from the i need the count in line with some other text.

  14. deewanand said:

    Thanks a billion !!!

    Your solution solved my problem.

    I appreciate your effort.

    Thanks again.

  15. Joe Lv said:

    not working on IE 6.0.

    it reported “unterminated string constant” error

  16. Vishal said:

    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.

  17. Vishal said:

    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.

  18. Vishal said:

    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

  19. morison dony said:

    Very nice information. Thanks for this.

  20. Robert said:

    Can you please post the countdown.php exactly as seen in the demo

  21. Robert said:

    any one who has this working 100% could they please send me the countdown.php hackalive(at)gmail(dot)com

  22. Mordechay said:

    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

  23. Mordechay said:

    I mean: I need more than one clock per page, can it be done?

    Sincerely
    Mordechay

  24. Mordechay said:

    if you know how multiple countdowns can be done please e-mail me at: tamord@gmail.com

    Thanks

  25. eugene-last said:

    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

  26. Kidino said:

    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…

  27. mosi said:

    your 5 star.
    take it.
    best in my favorite thanks a lot.
    sorry i cant donate it very simple and best.

  28. mosi said:

    your 5 star.
    take it.
    best in my favorite thanks a lot.
    sorry i cant donate it very simple and best.

  29. mosi said:

    your 5 star.
    take it.
    best in my favorite thanks a lot.
    sorry i cant donate it very simple and best.

  30. tiago said:

    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.

  31. JRP said:

    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!

  32. Sara Bruce said:

    Wow!,
    Amazing to be here.Awesome work buddy.

  33. Sherwin said:

    Great Script but is there a way for the script to reset itself midnight everyday. I just want it to countdown each day.

  34. Daz said:

    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;

  35. Daz said:

    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 ?>;

  36. JavaScript Countdown Timer said:

    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

  37. Andrea said:

    Hi, thanks for the script.
    Do you think is possible to have the output displayed in
    a different language?, ie: “days” to “giorni” (italian)

  38. Andrea said:

    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

  39. Html countdown timer for web page - Web page - Web page said:

    [...] 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 [...]

  40. CarrieAndJonathan Traveling said:

    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.

  41. gg said:

    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 :)

  42. Kódl said:

    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.

  43. Cirrus said:

    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 :)

  44. Cirrus said:

    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 :)

  45. PatrikRoy said:

    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?)

  46. Free java script countdown - Script tutorial - Free scripts said:

    [...] 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 [...]

  47. PHP-Javascript Countdown Script With Timezone Setting ... said:

    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…

  48. Welliam Shezispeare said:

    Thanks for the server-side version. Just what I have been looking for.

  49. Dodo_phpLearner said:

    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;
    }

  50. Dodo_phpLearner said:

    at index.php
    this statement should be between the while bracts:

    echo”do_cd();

  51. Alexandre said:

    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

  52. Deus said:

    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 ^_^

  53. Deus said:

    I managed to get a working script. If anyone needs it let me know!

  54. Franklin Marshall Pull said:

    Pleasant place! The posting will be filled with guider intelligence as well as really constructive. Many thanks intended for expressing using additional folks.

  55. Tamil selvan said:

    Hi…
    Thanks for the free scripts. I have one issue this script. Timer various different browser. Can u help anyone.

  56. Antoni wijaya said:

    good post,,good script,,good blog…can help anybody…

  57. mark said:

    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!!!

  58. pragal said:

    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’

  59. hot photos said:

    Hi…
    Thanks for the free scripts. I have one issue this script. Timer various different browser. Can u help anyone

  60. omar said:

    i know this might be an old post and all ,,, but the script works great exempt when i use the r&data=intro.swf

    the clock resets its self every time you refresh the page.

    if i change it to anything else like .html or .doc or .txt all those work. but when using .swf it resets the timer every time..

    any ideas please?

  61. Dean said:

    Thanks! Very useful.

  62. PRCode said:

    Hi, there is an error in the script:
    Line 150:
    if (dd < 10) { hh = "0"+dd; }

    Must be:
    if (dd < 10) { dd = "0"+dd; }

    Thanks for the script!

  63. taonaut said:

    For those of you that are interested in getting time synched correctly and didn’t get Daz’ code to work, please exchange his last part of code (the last part in the do_cd()-function) with this:

    currentDateTime = new Date().getTime();
    elapsedSeconds = (start – currentDateTime) / 1000;
    elapsedSecondsBetweenDates = Math.abs(elapsedSeconds);
    countdown = startcountdown – elapsedSecondsBetweenDates;

  64. Fabrizio Rocca said:

    Thank you, good article

  65. manh said:

    hello,
    can anybody provide other download link?
    the download link on this post has been expired
    thank you so much!

Leave a Reply