jQuery and PHP Countdown timer from formatted variable

Question

I need to build a countdown timer in jquery that replaces the html in a span tag from a php variable that's formatted to XX Days XX:XX:XX. It should load the variable on page load and then when the jquery script loads it starts the countdown but keeping the same format (XX Days XX:XX:XX) and eventually displays "Expired" and stops the countdown.

I have a jsFiddle started (http://jsfiddle.net/2SDdh/1/) but it shows the formatted time and then loads a 10 sec countdown and eventually shows "Expired". Anyone know how to get the formatting correct?

My HTML output via PHP

<span class="exp">10 Days 10:10:10</span>

My jQuery

$(function(){
  var count = 10;
  countdown = setInterval(function(){
    if (count > 0) {
      count--;
      $(".exp").html(count);
    } else {
      $(".exp").html('Expired');
    }
  }, 1000);
});

Answer 1

try this

html:

<span class="days">10</span> Days <br />
<span class="exp">23:59:59</span>​

javascript :

 $(function(){
    var days = 10;
    var count = 86399;
    var count2 = 0;
    var hour = 0;
    var min = 0;
    var sec = 0;

    countdown = setInterval(function() {
        if (days != 0 || count != 0) {
            if (count == 0) {
                days--;
                count = 86399;
            } else {
                count--;
            }
            count2 = count;
            hour = Math.floor(count2 / 3600);
            count2 = count2 % 3600;
            min = Math.floor(count2 / 60);
            count2 = count2 % 60;
            sec = count2;

            $(".exp").html(hour + ":" + min + ":" + sec);
            $(".days").html(days);
        } else {
            $(".exp").html('Expired');
        }
    }, 1000);
});​

Cheers!