Countdown timer using jQuery or Google App Engine?

Question

I need to create a countdown clock, that counts down the days, hours, minutes and seconds that are left to a date of my choice, using jQuery or Google App Engine (Python).

I have created a timer using JavaScript but for that I was using the system time.

I need to use the server time. Can anybody give me ideas to build a count down timer using the server UTC time.

Answer 1

I created a timer using Javascript,But in that i used system time.

If that JavaScript really serves your needs, then that JavaScript code could easily be made dynamic as well. In the code, wherever the current system time is initialized, simply insert your server time using your language of choice (Python). In other words: use your server language (Python) to output the script just as it is right now, except for replacing the part that initializes the current time.

In PHP, some pseudocode (not sure about the arguments of the Date() constructor) might look like, for example:

// my_countdown_script.php
[..]
var startTime = new Date( <?php echo time(); ?> );
[..]

Then, rather than including your JavaScript, you would be including the PHP file that inserts the server time like above:

<script type="text/javascript" src="my_countdown_script.php"></script>

The good thing is: this will work in any browser that supports the JavaScript you already created.

(In some later version, your JavaScript could include some initializers that allow you to set the current time after including the library in your HTML. That would allow the actual JavaScript library to be static, and thus to be cached by the browser.)

Answer 2

a good jquery plugin can be found here http://keith-wood.name/countdown.html

all you need to do then is pass in your new date from your scripting language php/asp.net by setting a variable on the page before the initialisation and updating the _calculatePeriods function to take that variable instead of the now one.

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<script type="text/javascript">
$(function () {
    var servernow = new Date( <?php echo time(); ?> );
    var austDay = new Date();
    austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
    $('#defaultCountdown').countdown({until: austDay});
    $('#year').text(austDay.getFullYear());
});


</script>

from js/jquery.countdown.js

 * Calculate the requested periods between now and the target time.
   @param  inst  (object) the current settings for this instance
   @param  show  (string[7]) flags indicating which periods are requested/required
   @param  now   (Date) the current date and time
   @return  (number[7]) the current time periods (always positive)
            by year, month, week, day, hour, minute, second */
_calculatePeriods: function(inst, show, now) {
    // Find endpoints
    inst._now = servernow;

Josh

Answer 3

You can reliably get server time from http://just-the-time.appspot.com/ -- an app engine app I made to help out a questioner on stack overflow, actually;-). Its simple code is opensourced at http://code.google.com/p/just-the-time/, and I could easily add the functionality you require (a page that, queried with the future date of your choice, returns days, hours, minutes and seconds to it, in some easily usable format) -- just let me know!

Answer 4

jQuery Timers is a plugin I've used in the past, and found to be very good.

Simply set two JavaScript variables to the current and target time for the countdown, and use a jQuery timer to update the "time remaining". If you want, you can add another time that re-synchronises the server and client times as well, every so often - though this probably isn't necessary.

Answer 5

So basically you need two things:

1. Page that displays the countdown time using the server time.
2. Client side updating of the time.

Render your time server side in something like this:

<span id="countdown" title="1245515631554">4 min. and 24 seconds</span>

Where the title is a timestamp of the current time that you can easily parse. You could also parse the text, but that requires more complex code.

Then add some Javascript that gets the time and updates the text every second. Setting a timeout that gets the date, updates it and sets the text.

Answer 6

why not simply use the UTC methods of the date object?

see: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Date

all local time methods have UTC counterparts

edit: this is meant to be used with his existing implementation in javascript.

If you really want to be sure you get the server time, do an XHR request (for anything) and check the Date header