我想在页面上多次显示倒计时,但我无法让它多次触发。有没有一种方法可以做到这一点我在想一个 for each 可能适用于此?
https://jsfiddle.net/3a4m71vo/
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
};
}
function initializeClock(id, endtime) {
var clock = document.querySelector(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var oneMinute = 60000;
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
if (t.total < oneMinute) {
clearInterval(timeinterval);
clock.style.display = "none";
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = 'September 29 2019 13:18:00';
initializeClock('.js-countdown', deadline);
最佳答案
您遇到的问题是您没有为 html/javascript 使用 ID。相反,您传递的是 html (div) 的类。
我添加了两个 html block 并为它们指定了 id,一个
和 两个
。
因此:
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
};
}
function initializeClock(id, endtime) {
var clock = document.querySelector(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var oneMinute = 60000;
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
if (t.total < oneMinute) {
clearInterval(timeinterval);
clock.style.display = "none";
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
initializeClock('#one', 'September 29 2019 13:18:00');
initializeClock('#two', 'September 28 2019 13:10:00');
.countdown__counter {
display: flex;
margin: 0 0 15px;
}
.countdown__counter-item {
display: flex;
margin: 0 15px 0 0;
}
<div id="one" class="countdown__counter js-countdown">
<div class="countdown__counter-item">
<span class="days bond-countdown__time"></span>
<div class="bond-countdown__small-text">D</div>
</div>
<div class="countdown__counter-item">
<span class="hours countdown__time"></span>
<div class="bond-countdown__small-text">H</div>
</div>
<div class="countdown__counter-item">
<span class="minutes countdown__time"></span>
<div class="countdown__small-text">M</div>
</div>
</div>
<div class="countdown__counter js-countdown">
<div class="countdown__counter-item">
<span class="days bond-countdown__time"></span>
<div class="bond-countdown__small-text">D</div>
</div>
<div class="countdown__counter-item">
<span class="hours countdown__time"></span>
<div class="bond-countdown__small-text">H</div>
</div>
<div class="countdown__counter-item">
<span class="minutes countdown__time"></span>
<div class="countdown__small-text">M</div>
</div>
</div>
<div id="two" class="countdown__counter js-countdown">
<div class="countdown__counter-item">
<span class="days bond-countdown__time"></span>
<div class="bond-countdown__small-text">D</div>
</div>
<div class="countdown__counter-item">
<span class="hours countdown__time"></span>
<div class="bond-countdown__small-text">H</div>
</div>
<div class="countdown__counter-item">
<span class="minutes countdown__time"></span>
<div class="countdown__small-text">M</div>
</div>
</div>
<div class="countdown__counter js-countdown">
<div class="countdown__counter-item">
<span class="days bond-countdown__time"></span>
<div class="bond-countdown__small-text">D</div>
</div>
<div class="countdown__counter-item">
<span class="hours countdown__time"></span>
<div class="bond-countdown__small-text">H</div>
</div>
<div class="countdown__counter-item">
<span class="minutes countdown__time"></span>
<div class="countdown__small-text">M</div>
</div>
</div>
关于javascript - 不止一次触发 JS 脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58135345/