在我的倒计时钟上用两位数显示小于10的数字时遇到了问题

Question

因此，在我的网站上加载倒计时时钟的过程中，我找到了一些代码来显示倒计时时钟。实际上不止一个例子。我选择了一个我能理解的，一路上我学到了更多的东西。这个代码有效，但不会显示小于10的数字和两位数字（即，我希望7秒显示为07秒）。

    // set the date we're counting down to
var target_date = new Date("May 16, 2014").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);

// format countdown string + set tag value
countdown.innerHTML = days + " DAYS " + hours + ":"
+ minutes + ":" + seconds + " UNTIL DRAWING";

}, 1000);

我试着将时间变量设置为函数。因此，我选择了：

  seconds = function () {
   parseInt (seconds_left % 60);
   if (seconds_left % 60 < 10) {
   return "0" + seconds_left; }
   else return seconds_left % 60;
}

不过没有骰子。任何关于我可能尝试的其他建议都将不胜感激。

Answer 1

如果数字小于10，只需在数字开头添加'0'即可：

countdown.innerHTML = (days < 10 ? '0' : '') + days + " DAYS " +
                      (hours < 10 ? '0' : '') + hours + ":" +
                      (minutes < 10 ? '0' : '') + minutes + ":" +
                      (seconds < 10 ? '0' : '') + seconds + " UNTIL DRAWING";

Answer 2

您的代码很好，但您确实需要在秒后使用"（）"来调用函数。还有一个问题是seconds（）是另一个函数。

我重命名了该函数，将其上移到interval函数中，并将秒作为变量传入。

以下是一种使其发挥作用的方法：

//... your other code
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
var parseSeconds = function (seconds_left) {
   parseInt (seconds_left % 60);
   if (seconds_left % 60 < 10) {
   return "0" + seconds_left; }
   else return seconds_left % 60;
}
// format countdown string + set tag value
countdown.innerHTML = days + " DAYS " + hours + ":"
+ minutes + ":" + parseSeconds(seconds) + " UNTIL DRAWING";
}, 1000);

但如果可以的话，更好的方法是使用moment.js。它们的格式非常简单。

Answer 3

这是moment.js解决方案。只需用这个替换所有代码并导入moment.js

setInterval(function () {
    var countdown = document.getElementById("countdown");
    countdown.innerHTML = moment().format('MMMM Do YYYY, h:mm:ss a');    
}, 1000);

http://jsfiddle.net/7dxjK/