Question

I have a PHP script that calculates the difference between a set date and the current date (in h:m:s) and I’d like to use that data for a simple visual Javascript countdown timer (using the PHP variables). This is the PHP code:

$date = date('Y-m-d h:i:s a', time());
$d1 = new DateTime("2012-11-18 11:14:15");
$d2 = new DateTime($date);
$result = $d1->diff($d2);
$hours = ($result->d*24)+$result->h;
$minutes = $result->i;
$seconds = $result->s;

What would be your preferred and most efficient way to display a countdown timer in Javascript? (Using either $d1 and $d2 or $hours, $minutes, $seconds?)

Answer 1

Maybe you could use some Jquery plugin, like this one: Jquery Countdown

If you don’t want to use plugins the general idea is this:

1. PHP writes the starting datetime to a HTML tag or to a javascrit variable.

   echo '<div id="year">$year</div>';

2. In javascript you create a function that decreases a current datetime by 1 second, decreasing minutes, hours, etc, when necessary.

   function decrease_by_1_sec(){
...
}

3. Next, on the $(document).ready() function you make the decrease_by_1_sec() function execute every second.

   setInterval(decrease_by_1_sec(), 1000);

And that’s it! that’s the general idea.