When you save a comment on Digg, you have five minutes to edit it. Digg informs you of the time remaining with a real-time javascript countdown.

These “live” countdowns are definitely the way to go if you need to inform your user of time deadlines in the near future, since static HTML “time remaining” numbers would leave the user in a dilemma of not being able to see how much time they have left without refreshing and losing their data.

Here’s one possible way to implement this type of counter for your web service:

<script type="text/javascript">
// time is the number of seconds left
// name is the text part of the container to insert countdown in
// num is the unique id of the container. Allows for more than 1 per page
function countdown(time, name, num)
{
   // grab the element object of the countdown container
   countdownDiv = document.getElementById(name + num); 

   // calculate number of minutes from the seconds
   minutes = Math.floor(time / 60); 

   // remainder is number of seconds
   seconds = time % 60; 

   // add the current countdown display to the container specified
   countdownDiv.innerHTML = minutes + 'm ' + seconds + 's remaining';

   // if time is up remove the edit div, otherwise repeat every second
   if(time <= 0)
      countdownDiv.parentNode.removeChild( countdownDiv );
   else
      setTimeout('countdown(' + --time + ',"' + name + '","' + num + '");', 1000);
} 

</script>

This function takes two arguments: time is the duration of the countdown in seconds, and id is the id of the DOM that contains the countdown and should be updated every second.

To insert a counter into a page, the code should look like this:

<!-- In this case name is div_name and num is 1 -->
<div id=”div_name1″></div>

<script type=”text/javascript”>
   countdown(300, "div_name", 1)
</script>

Here’s a demo of the result: