lightweight jQuery countdown

Question

I've seen some really nice looking jQuery plugins to count down the number of day, hours, minutes and seconds. They use images and look great. But I'm looking for a simple little countdown that populates a div with the number of seconds remaining. I'm going to use it in conjunction with:

function submitform() {
    document.forms[0].submit();
}

jQuery(function($) {
    setInterval("submitform()",20000);
});

I just want something real unobtrusive in the corner somewhere to let them know that the page is about to refresh all by itself.

Answer 1

I just wrote a countdown for a project this week. It's just javascript, no jQuery needed.

Just pass the id of the div you want to place the countDown in, and the end and start time in milliseconds (or you can change how the Date params work, I had the dates in ms on the page already, so I passed them into the function, but you could do it differently):

<div id="countDownDiv"></div>
<script type="text/javascript">
    countDown("countDownDiv",1281239850163, new Date().getTime());
</script>

And here's the function:

function countDown(id, end, cur){
        this.container = document.getElementById(id);
        this.endDate = new Date(end);
        this.curDate = new Date(cur);


var context = this;

var formatResults = function(day, hour, minute, second){
    var displayString = [
                '<div class="stat statBig"><h3>',day,'</h3><p>days</p></div>',
                '<div class="stat statBig"><h3>',hour,'</h3><p>hours</p></div>',
                '<div class="stat statBig"><h3>',minute,'</h3><p>minutes</p></div>',
                '<div class="stat statBig"><h3>',second,'</h3><p>seconds</p></div>'
    ];
    return displayString.join("");
}

var update = function(){
    context.curDate.setSeconds(context.curDate.getSeconds()+1);

    var timediff = (context.endDate-context.curDate)/1000; 

    // Check if timer expired:
    if (timediff<0){ 
        return context.container.innerHTML = formatResults(0,0,0,0);
    }

    var oneMinute=60; //minute unit in seconds
    var oneHour=60*60; //hour unit in seconds
    var oneDay=60*60*24; //day unit in seconds

    var dayfield=Math.floor(timediff/oneDay);
    var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour);
    var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute);
    var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute));

    context.container.innerHTML = formatResults(dayfield, hourfield, minutefield, secondfield);

    // Call recursively
    setTimeout(update, 1000);
};

// Call the recursive loop
update();
}

Answer 2

First off, setInterval is used when you want to fire a function at set intervals, for example once every twenty seconds. For one-off events use setTimeout.

Here is a lightweight solution for you, assuming you have a div with an id of countdown:

$(function() {
   var seconds = 20;
   setTimeout(updateCountdown, 1000);

   function updateCountdown() {
      seconds--;
      if (seconds > 0) {
         $("#countdown").text("You have " + seconds + " seconds remaining");
         setTimeout(updateCountdown, 1000);
      } else {
         submitForm();
      }
   }
});

function submitForm() {
   document.forms[0].submit();
}