多个 JavaScript 倒计时日期?
Multiple JavaScript countdown dates?
所以我目前有一个约会对象,但我想要多个,并且他们有唯一的 ID。
我目前可以使用 <div id="countdown"></div>
将其放入我的 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);
我尝试了很多不同的方法并多次搜索解决方案,但一无所获。如有任何帮助,我们将不胜感激。
尝试将变量限定在函数的范围内,并在调用后返回它。我为你做了一个例子:
http://jsfiddle.net/wt9pb9r3/1/
我使用 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);
}
}
工作样本在 https://jsfiddle.net/mLr571tj/
编辑:确保在初始化和显示函数中使用相同的日期时间格式。
所以我目前有一个约会对象,但我想要多个,并且他们有唯一的 ID。
我目前可以使用 <div id="countdown"></div>
将其放入我的 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);
我尝试了很多不同的方法并多次搜索解决方案,但一无所获。如有任何帮助,我们将不胜感激。
尝试将变量限定在函数的范围内,并在调用后返回它。我为你做了一个例子: http://jsfiddle.net/wt9pb9r3/1/
我使用 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);
}
}
工作样本在 https://jsfiddle.net/mLr571tj/
编辑:确保在初始化和显示函数中使用相同的日期时间格式。