JavaScript 倒计时，添加小时和分钟

Question

所以，我有下面的（秒倒计时）井井有条。但！我正在尝试添加小时和分钟作为倒计时的一部分。理想情况下保持相同的结构，并且只使用纯 JS。我希望输出是：

本次促销还剩 X 小时 X 分 X 秒！

var count=30;

    var counter=setInterval(timer, 1000); //1000 will  run it every 1 second

    function timer()
    {
      count=count-1;
      if (count <= 0)
      {
         clearInterval(counter);
         return;
      }

     document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
    }

如果解决方案必须用 jQuery 或其他库重写；没关系。只是不太可取。 为任何帮助而欢呼和问候。

Answer 1

类似这样的：

var count = 30;
var counter = setInterval(timer, 1000); //1000 will  run it every 1 second

function timer() {
    count = count - 1;
    if (count == -1) {
        clearInterval(counter);
        return;
    }

    var seconds = count % 60;
    var minutes = Math.floor(count / 60);
    var hours = Math.floor(minutes / 60);
    minutes %= 60;
    hours %= 60;

    document.getElementById("timer").innerHTML = hours + "hours " + minutes + "minutes and" + seconds + " seconds left on this Sale!"; // watch for spelling
}

Answer 2

var totalSeconds = 3723; // lets say we have 3723 seconds on the countdown
                         // that's 1 hour, 2 minutes and 3 seconds.

var hours   = Math.floor(totalSeconds / 3600 );
var minutes = Math.floor(totalSeconds % 3600 / 60);
var seconds = totalSeconds % 60;

var result = [hours, minutes, seconds].join(':');
console.log(result);
// 1:2:3

• hours 是秒除以小时的秒数 (3600)，向下取整
• minutes 是上述除法的余数，除以一分钟的秒数 (60)，向下取整。
• seconds 是总秒数除以一分钟的秒数的余数。

hour 之后的每个计算都必须使用 modulus 计算来获得余数，因为您不关心该步骤的总时间，只需进行下一个刻度即可。

Answer 3

我会使用与其他方法类似的方法，但我不会依赖 setInterval / setTimeout 作为计时器，尤其是如果用户可能会查看页面一段时间，因为它往往不准确。

var endTime = new Date(2013, 10, 31).getTime() / 1000;
function setClock() {
    var elapsed = new Date().getTime() / 1000;
    var totalSec =  endTime - elapsed;
    var d = parseInt( totalSec / 86400 );
    var h = parseInt( totalSec / 3600 ) % 24;
    var m = parseInt( totalSec / 60 ) % 60;
    var s = parseInt(totalSec % 60, 10);
    var result = d+ " days, " + h + " hours, " + m + " minutes and " + s + " seconds to go!";
    document.getElementById('timeRemaining').innerHTML = result;
    setTimeout(setClock, 1000);
}
setClock();

此方法每次运行时都会计算现在与未来日期之间的差异，从而消除任何不准确之处。

这里是一个例子：http://jsfiddle.net/t6wUN/1/