javascript - 多次触发 JS 脚本
问题描述
我想在一个页面上多次显示倒计时,但我不能让它多次触发。有没有办法做到这一点我在想一个 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 块并给了它们 idone
和two
.
因此:
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>
推荐阅读
- java - Java 类 TreeSet 中的 Java 方法 headSet 和 tailSet 是否在 log(N) 时间内工作?
- javascript - 移动背景位置
- version-control - 阻止一个模块安装为 dev-master
- oracle - Oracle SQL Developer 在启动后立即崩溃
- php - 即使没有显示错误,我的代码也在插入数据
- jquery - 通过在 ASP.NET MVC 5 中使用 Jquery-Ajax 单击删除按钮来删除每一行
- assembly - 什么是 C 运行时库中的 R_386_32 类型符号?
- printing - MapFish Print 3 中的边框
- path - 如何使用资源路径设置系统属性 [Jira 插件,OSGI]
- corda - 从子流中的 ENV 变量中读取数据