制作倒数计时器，将时间存储在变量中

Question

I have a variable in JavaScript storing time. For example, duration is a variable that stores time in minutes and hours as in 14 minutes or 1 hour 20 minutes. How do I make a countdown timer using this variable in JavaScript?

Answer 1

One way to do it would be to extract the desired values with a regular expression and to use setInterval() to call a function to periodically update the timer.

The following expression matches your pattern :

/^\s*(?:(\d+)\s+hour(?:s)?\s*)?(\d+)\s+minute(?:s)?$/i

The first capture group will give you the number of hours and the second one the number of minutes. You can access them thanks to the match method. That will return you an array containing the matches with one item per match (or null if no match is found).

You can then get h and m , respectively the number of hours and the munber of minutes like this

time  = "1 hour 10 minute";
match = time.match(/^\s*(?:(\d+)\s+hour(?:s)?\s*)?(\d+)\s+minute(?:s)?$/i);

if(match)
{
  h = (match[1] === undefined) ? 0 : match[1]; // The number of hours
  m = (match[2] === undefined) ? 0 : match[2]; // The number of minutes
}

That will give you the time you want to wait. You can easily convert it into milliseconds (because its more handy) and update it every seconds for example until it reaches 0.

The setInterval() javascript function allow you to call a function (your update function) every x milliseconds. This function returns an identifier that you can store and pass later to the clearInterval() function to clear a timer previously set.

interval = h * 3600000 + m * 60000; // the interval in ms
stopTime = new Date((new Date()).getTime() + interval); // when to stop counting

counter = setInterval(count, 1000);

Your count function then just has to get the current time, update the interval and check if this one is lower or equal to 0 in order to stop the timer.

function count()
{
  now      = new Date();
  interval = Math.max(0, stopTime.getTime() - now.getTime());

  if(interval <= 0) clearInterval(counter);
}

Here is an example of such a timer.