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

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();
}