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

您的代码很好，但您确实需要使用＆＃34;（）＆＃34;几秒后调用一个函数。然后就是问题，即seconds（）是另一个函数。

我重命名了该函数，将其移动到了区间函数中，并作为变量传递了秒数。

这是一种让它发挥作用的方法：

//... 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/

在我的倒计时时钟上显示两位数字时，数字少于10的麻烦

3 个答案: