多个JavaScript倒计时日期？

因此，我目前有一个日期，但我希望有多个，并为他们有唯一的id的

我目前可以使用

将其放入我的html中，但我想做一些像id=“countdown1”、id=“countdown2”、id=“countdown3”等的事情

为了更深入地解释，我试图为每个日期设置几个这样的日期，每个日期都有唯一的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);

var end=新日期（日期：UTC（2015,10,10,5））；
var_秒=1000；
var _minute=_second*60；
变量(小时)=(分钟)*60 ;；
var _日=_小时*24；
无功定时器；
函数showLeving（）{
var now=新日期（）；
var距离=结束-现在；
如果（距离<0）{
清除间隔（计时器）；
document.getElementById（'countdown'）。innerHTML='EXPIRED！'；
返回；
}
var天数=数学楼层（距离/天数）；
var小时=数学楼层（（距离%\u天）/\u小时）；
var分钟=数学楼层（距离%\u小时）/\u分钟）；
var秒=数学楼层（（距离%\u分钟）/\u秒）；
document.getElementById（'countdown'）.innerHTML=days+'Day |'；
document.getElementById（'countdown'）。innerHTML+=hours+'hours |'；
document.getElementById（'countdown'）。innerHTML+=minutes+'minutes |'；
document.getElementById（'countdown'）.innerHTML+=seconds+'seconds'；
}
定时器=设置间隔（显示剩余，1000）；

---

我尝试了很多不同的方法，多次寻找解决方案，但都没有找到。如果您能在这方面提供帮助，我们将不胜感激。

请尝试将变量范围限定到函数中，并在函数被调用后返回它。我给你举了个例子：

---

我使用

setTimeout

模拟每隔几秒钟启动的日期。

使用对象，它是一个更干净的解决方案

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);
        }
    }

功能计时器（支架）{
变量控制器={
持有者：持有者，
结束：空，
有效期：0，
显示：函数（）{
var_秒=1000；
var _minute=_second*60；
变量(小时)=(分钟)*60 ;；
var _日=_小时*24；
var msg=“”；
var now=新日期（）；
var距离=controller.end-现在；
如果（距离<0）{
clearInterval（controller.intervalID）；
controller.holder.innerHTML='EXPIRED！'；
返回；
}
var天数=数学楼层（距离/天数）；
var小时=数学楼层（（距离%\u天）/\u小时）；
var分钟=数学楼层（距离%\u小时）/\u分钟）；
var秒=数学楼层（（距离%\u分钟）/\u秒）；
controller.holder.innerHTML=天+天+小时+小时+分钟+分钟+秒+秒；
}
}
this.countDown=函数（结束）{
controller.end=结束；
controller.intervalID=setInterval（controller.display，1000）；
}
}

工作样本

---

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

但是我怎么能有多个“（date.UTC（2015，10，10，5）”。您的JSFIDLE只有一个日期。这在JSFIDLE中有效，我也在CodePen中尝试过，但它在浏览器中不起作用。有什么想法吗？