Question

所以我目前有一个日期，但我想要多个，并且他们有唯一的ID。

我目前可以使用<div id="countdown"></div>将其放入我的html中，但我想做的事情就像id =＆＃34; countdown1＆＃34;，id =＆＃34; countdown2＆＃34;，id = ＆＃34;倒计时3＆＃34;等

为了更深入地解释，我试图为每个日期创建具有唯一ID的几个日期，因此我可以将每个人都放在html中。

var end = new Date(Date.UTC(2015, 10, 10));
var end = new Date(Date.UTC(2015, 10, 11));
var end = new Date(Date.UTC(2015, 10, 12));
var end = new Date(Date.UTC(2015, 10, 13));

这是我目前的剧本：

var end = new Date(Date.UTC(2015, 10, 10, 5));

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function showRemaining() {
    var now = new Date();
    var distance = end - now;
    if (distance < 0) {

        clearInterval(timer);
        document.getElementById('countdown').innerHTML = 'EXPIRED!';

        return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('countdown').innerHTML = days + ' Day | ';
    document.getElementById('countdown').innerHTML += hours + ' Hours | ';
    document.getElementById('countdown').innerHTML += minutes + ' Minutes | ';
    document.getElementById('countdown').innerHTML += seconds + ' Seconds ';
}

timer = setInterval(showRemaining, 1000);

我尝试了很多不同的东西，并多次搜索解决方案，却一无所获。对此有任何帮助将非常感激。

Answer 1

使用对象，这是一个更清洁的解决方案。

function Timer(holder) {

        var controller = {
            holder: holder,
            end: null,
            intervalID:0,
            display: function () {
                var _second = 1000;
                var _minute = _second * 60;
                var _hour = _minute * 60;
                var _day = _hour * 24;

                var msg = "";

                var now = new Date();

                var distance = controller.end - now;
                if (distance < 0) {

                    clearInterval(controller.intervalID);
                    controller.holder.innerHTML = 'EXPIRED!';

                    return;
                }

                var days = Math.floor(distance / _day);
                var hours = Math.floor((distance % _day) / _hour);
                var minutes = Math.floor((distance % _hour) / _minute);
                var seconds = Math.floor((distance % _minute) / _second);
                controller.holder.innerHTML = days + ' Day | ' + hours + ' Hours | ' + minutes + ' Minutes | ' + seconds + ' Seconds ';

            }
        }

        this.countDown = function (end) {
            controller.end = end;
            controller.intervalID = setInterval(controller.display, 1000);
        }
    }

https://jsfiddle.net/mLr571tj/

的工作样本

编辑：确保在初始化和显示功能中使用相同的日期时间格式。

Answer 2

尝试将变量作用于函数并在调用后返回它。我为你做了一个例子： http://jsfiddle.net/wt9pb9r3/1/

我使用setTimeout来模拟相隔几秒钟开始的日期。

多个JavaScript倒计时日期？

2 个答案: