How To Functionalize Countdown?

I made a countdown timer and coded this in with HTML and CSS, but I wasn't able to make it functional using jQuery. How can I functionalize this countdown? Here is the HTML struct

Solution 1:

functioncounter(count) {
  countdown = setInterval(function(){
    var temp;
    $("p#d").html(Math.floor(count/(60*60*24)));
    temp = count%(60*60*24);
    $("p#h").html(Math.floor(temp/(60*60)));
    temp = count%(60*60);
    $("p#m").html(Math.floor(temp/(60)));
    temp = count%(60);
    $("p#s").html(temp);
    if (count == 0) {
         alert("time's up");
         clearInterval(countdown);       
    }
    count--;
  }, 1000);
}

counter(60*60*24*2);

​demo

EDIT-1:

counter gets time as seconds.

counter(10); //10 secondscounter(10*60) //600 seconds -> 10 minutes.counter(10*60*60) //36000 seconds -> 600 minutes -> 10 hour

EDIT-2:

if you want it to work Date based, you should change function like this,

functioncounter(futureDate) {
  var today = newDate(); // today
  count = Math.floor((futureDate-today)/1000);
  countdown = setInterval(function(){
    var temp;
    $("p#d").html(Math.floor(count/(60*60*24)));
    temp = count%(60*60*24);
    $("p#h").html(Math.floor(temp/(60*60)));
    temp = count%(60*60);
    $("p#m").html(Math.floor(temp/(60)));
    temp = count%(60);
    $("p#s").html(temp);
    if (count == 0) {
         alert("time's up");
         clearInterval(countdown);       
    }
    count--;
  }, 1000);
}

counter(newDate(2012,4,8)); // May 8, 2012 00:00:00/* counter(new Date(2012,4,8,15,49,10)); // May 8, 2012 15:49:00 */
​

http://jsfiddle.net/NfLAB/1/