HTML 页面上的多个 (14) 倒计时不起作用
Multiple (14) countdowns on HTML page don't work
我想在单个 HTML 页面上显示 14 个倒计时(最好是 HTML 文档中的纯 p
元素)。我对 JavaScript 一无所知,所以我从 w3schools 拿了一个倒计时脚本。工作正常,不知何故,我什至通过搜索网络方法设法显示了两位数的计时器。
这是代码(更新!):
// defining countDownDates as an empty array :
var countDownDates = [];
// adding any count down date to your array :
countDownDates.push(new Date("Oct 22, 2017 14:00:00").getTime());
countDownDates.push(new Date("Oct 23, 2017 14:00:00").getTime());
countDownDates.push(new Date("Oct 24, 2017 08:00:00").getTime());
countDownDates.push(new Date("Oct 25, 2017 08:00:00").getTime());
countDownDates.push(new Date("Oct 24, 2017 08:00:00").getTime());
countDownDates.push(new Date("Oct 25, 2017 08:00:00").getTime());
countDownDates.push(new Date("Oct 26, 2017 02:00:00").getTime());
countDownDates.push(new Date("Oct 27, 2017 02:00:00").getTime());
countDownDates.push(new Date("Oct 27, 2017 20:00:00").getTime());
countDownDates.push(new Date("Oct 29, 2017 02:00:00").getTime());
countDownDates.push(new Date("Oct 27, 2017 20:00:00").getTime());
countDownDates.push(new Date("Oct 29, 2017 02:00:00").getTime());
countDownDates.push(new Date("Oct 29, 2017 19:00:00").getTime());
countDownDates.push(new Date("Oct 30, 2017 19:00:00").getTime());
// calling an init function that will build the HTML needed for every count down
init(countDownDates);
// looping through your array of countDownDates
for (var i=0;i<countDownDates.length;i++) {
// calling the countdown function, pass it the array and the current version of i as parameters
countDown(countDownDates, i);
}
/* adds, to the document, a p element for each entry in the countDownDates array */
function init(countDownDates) {
var timersDiv = document.getElementById("timers");
var dateElement;
for (var i=0;i<countDownDates.length;i++) {
dateElement = document.createElement("p");
dateElement.id = "date" + i;
timersDiv.appendChild(dateElement);
}
}
/* countDown function, your countDown handling code within a reusable function */
function countDown(countDownDates, index) {
var x = setInterval(function() {
var now, distance, days, hours, minutes, seconds, x;
now = new Date().getTime();
distance = countDownDates[index] - now;
// Time calculations for days, hours, minutes and seconds
days = Math.floor(distance / (1000 * 60 * 60 * 24));
hours = Math.floor((distance % (1000 * 60 * 60 * 24)) /
(1000 * 60 * 60));
minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display days, hours, minutes and seconds in 2 digits if < 10
if((days+"").length === 1){
days = "0"+days;
}
if((hours+"").length === 1){
hours = "0"+hours;
}
if((minutes+"").length === 1){
minutes = "0"+minutes;
}
if((seconds+"").length === 1){
seconds = "0"+seconds;
}
// Display the result in the element with id date0, date1, etc.
document.getElementById("date" + index).innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds + "";
// If the count down is finished, write some text and add css class to change ended timers color
if (distance < 0) {
clearInterval(x);
document.getElementById("date" + index).className = "timerend";
document.getElementById("date" + index).innerHTML = "00:00:00:00";
}
}, 1000);
}
我尝试将脚本完全乘以 14 次,并将第一行代码更改为特定的未来日期 - 因此相同的倒计时出现 14 次。
有没有一种方法可以将第一行以某种方式乘以 14 次,从而使 14 个不同的 p
元素中的 14 个不同的特定日期按 14 个 ID 进行计数?
例如
<p class="date1" >show timer1</p>
<p class="date2" >show timer2</p>
<p class="..." >...</p>
<p class="date14" >show timer14</p>
编辑:
此外,我想知道如何获得两个额外的 p
元素输出,例如
<p class="online_date0" >show text "This countdown is running right now"</p>
<p class="offline_date0 >show text "This countdown is not running at the moment</p>
... 拥有类似 "on air" 的指标。谢谢!
编辑 2017 年 11 月 1 日
我不明白为什么这在特定的 if 函数中不起作用:
if (distance < 0) {
clearInterval(x);
document.getElementById("date" + index).className = "timerend";
document.getElementById("outofdate" + index).className = "timerend";
document.getElementById("date" + index).innerHTML = "00:00:00:00";
在 HTML 文档中,日期 + 索引 p
s 有一个 class,它在添加 timerend 时被删除。如果我在 clearInterval(x)
之后的第一行中的 =
之前添加 +
,则旧的 class 会保留,但每秒都会添加新的 class。当然,我只想添加一次。如果我不在该行的 =
之前放置 +
,那么旧的 class 当然会被删除。
由于我开始学习Js,所以我想了解这里发生了什么。我错过了什么?
我只想向每个具有索引 ID 的 p
添加一个 class,以便它在计时器结束时改变颜色。它有效,但它删除了我在 class 索引的 p
中放置的所有其他格式。
HTML
<p id="date0" class="dates"></p>
在CSS中,我在.dates
中添加了padding等。我读过有关添加 classes 并保留原件的信息,但显然无法理解解决方案。
这是一个带有 8 个定时器的演示
将您的逻辑重构为接受 元素节点 和 countDownDate
的方法
将data-countDownDate
毫秒值放入元素本身。
迭代定时器并初始化它们。
//var countDownDate = new Date("Oct 22, 2019 14:00:00").getTime();
[].slice.call( document.querySelectorAll( ".dateTimer" ) ).forEach( function( element ){
startTimer(element, Number(element.getAttribute( "data-countDownDate" )) );
});
function startTimer(element, countDownDate) {
// Update the count down every 1 second
//console.log( element );
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) /
(1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if ((days + "").length === 1) {
days = "0" + days;
}
if ((hours + "").length === 1) {
hours = "0" + hours;
}
if ((minutes + "").length === 1) {
minutes = "0" + minutes;
}
if ((seconds + "").length === 1) {
seconds = "0" + seconds;
}
element.innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds + "";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
element.innerHTML = "Ende!";
}
}, 1000);
}
<p class="dateTimer" data-countDownDate="1509823808052"></p>
<p class="dateTimer" data-countDownDate="1509823818052"></p>
<p class="dateTimer" data-countDownDate="1509823828052"></p>
<p class="dateTimer" data-countDownDate="1509823838052"></p>
<p class="dateTimer" data-countDownDate="1509823848052"></p>
<p class="dateTimer" data-countDownDate="1509823858052"></p>
<p class="dateTimer" data-countDownDate="1509823868052"></p>
<p class="dateTimer" data-countDownDate="1509823878052"></p>
对于 "multiply" 您的代码,您可以结合使用数组和函数。
- 在您的数组中,您将定义 14 个 countDownDates。
- 例如,您可以使用 for 循环遍历此数组
- 您可以将当前的 countDownDate 信息传递给将处理单个倒计时的函数,就像您的代码现在处理它的方式一样。
这是一个例子:
// defining countDownDates as an empty array :
var countDownDates = [];
// adding any count down date to your array :
countDownDates.push(new Date("Oct 24, 2017 10:49:50").getTime());
countDownDates.push(new Date("Oct 24, 2017 10:49:45").getTime());
countDownDates.push(new Date("Oct 28, 2017 10:49:45").getTime());
countDownDates.push(new Date("Oct 29, 2017 10:49:45").getTime());
countDownDates.push(new Date("Oct 30, 2017 10:49:45").getTime());
countDownDates.push(new Date("Nov 1, 2017 10:49:45").getTime());
countDownDates.push(new Date("Nov 12, 2017 10:49:45").getTime());
countDownDates.push(new Date("Nov 24, 2017 10:49:45").getTime());
// calling an init function that will build the HTML needed for every count down
init(countDownDates);
// looping through your array of countDownDates
for (var i=0;i<countDownDates.length;i++) {
// calling the countdown function, pass it the array and the current version of i as parameters
countDown(countDownDates, i);
}
/* adds, to the document, a p element for each entry in the countDownDates array */
function init(countDownDates) {
var timersDiv = document.getElementById("timers");
var dateElement;
for (var i=0;i<countDownDates.length;i++) {
dateElement = document.createElement("p");
dateElement.id = "date" + i;
timersDiv.appendChild(dateElement);
}
}
/* countDown function, your countDown handling code within a reusable function */
function countDown(countDownDates, index) {
var x = setInterval(function() {
var now, distance, days, hours, minutes, seconds, x;
now = new Date().getTime();
distance = countDownDates[index] - now;
// Time calculations for days, hours, minutes and seconds
days = Math.floor(distance / (1000 * 60 * 60 * 24));
hours = Math.floor((distance % (1000 * 60 * 60 * 24)) /
(1000 * 60 * 60));
minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display days, hours, minutes and seconds in 2 digits if < 10
if((days+"").length === 1){
days = "0"+days;
}
if((hours+"").length === 1){
hours = "0"+hours;
}
if((minutes+"").length === 1){
minutes = "0"+minutes;
}
if((seconds+"").length === 1){
seconds = "0"+seconds;
}
// Display the result in the element with id date0, date1, etc.
document.getElementById("date" + index).innerHTML = days + ":" +
hours + ":"
+ minutes + ":" + seconds + "";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("date" + index).innerHTML = "Ende!";
}
}, 1000);
}
<!-- just an empty div we will add countDown elements into -->
<div id="timers">
</div>
我想在单个 HTML 页面上显示 14 个倒计时(最好是 HTML 文档中的纯 p
元素)。我对 JavaScript 一无所知,所以我从 w3schools 拿了一个倒计时脚本。工作正常,不知何故,我什至通过搜索网络方法设法显示了两位数的计时器。
这是代码(更新!):
// defining countDownDates as an empty array :
var countDownDates = [];
// adding any count down date to your array :
countDownDates.push(new Date("Oct 22, 2017 14:00:00").getTime());
countDownDates.push(new Date("Oct 23, 2017 14:00:00").getTime());
countDownDates.push(new Date("Oct 24, 2017 08:00:00").getTime());
countDownDates.push(new Date("Oct 25, 2017 08:00:00").getTime());
countDownDates.push(new Date("Oct 24, 2017 08:00:00").getTime());
countDownDates.push(new Date("Oct 25, 2017 08:00:00").getTime());
countDownDates.push(new Date("Oct 26, 2017 02:00:00").getTime());
countDownDates.push(new Date("Oct 27, 2017 02:00:00").getTime());
countDownDates.push(new Date("Oct 27, 2017 20:00:00").getTime());
countDownDates.push(new Date("Oct 29, 2017 02:00:00").getTime());
countDownDates.push(new Date("Oct 27, 2017 20:00:00").getTime());
countDownDates.push(new Date("Oct 29, 2017 02:00:00").getTime());
countDownDates.push(new Date("Oct 29, 2017 19:00:00").getTime());
countDownDates.push(new Date("Oct 30, 2017 19:00:00").getTime());
// calling an init function that will build the HTML needed for every count down
init(countDownDates);
// looping through your array of countDownDates
for (var i=0;i<countDownDates.length;i++) {
// calling the countdown function, pass it the array and the current version of i as parameters
countDown(countDownDates, i);
}
/* adds, to the document, a p element for each entry in the countDownDates array */
function init(countDownDates) {
var timersDiv = document.getElementById("timers");
var dateElement;
for (var i=0;i<countDownDates.length;i++) {
dateElement = document.createElement("p");
dateElement.id = "date" + i;
timersDiv.appendChild(dateElement);
}
}
/* countDown function, your countDown handling code within a reusable function */
function countDown(countDownDates, index) {
var x = setInterval(function() {
var now, distance, days, hours, minutes, seconds, x;
now = new Date().getTime();
distance = countDownDates[index] - now;
// Time calculations for days, hours, minutes and seconds
days = Math.floor(distance / (1000 * 60 * 60 * 24));
hours = Math.floor((distance % (1000 * 60 * 60 * 24)) /
(1000 * 60 * 60));
minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display days, hours, minutes and seconds in 2 digits if < 10
if((days+"").length === 1){
days = "0"+days;
}
if((hours+"").length === 1){
hours = "0"+hours;
}
if((minutes+"").length === 1){
minutes = "0"+minutes;
}
if((seconds+"").length === 1){
seconds = "0"+seconds;
}
// Display the result in the element with id date0, date1, etc.
document.getElementById("date" + index).innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds + "";
// If the count down is finished, write some text and add css class to change ended timers color
if (distance < 0) {
clearInterval(x);
document.getElementById("date" + index).className = "timerend";
document.getElementById("date" + index).innerHTML = "00:00:00:00";
}
}, 1000);
}
我尝试将脚本完全乘以 14 次,并将第一行代码更改为特定的未来日期 - 因此相同的倒计时出现 14 次。
有没有一种方法可以将第一行以某种方式乘以 14 次,从而使 14 个不同的 p
元素中的 14 个不同的特定日期按 14 个 ID 进行计数?
例如
<p class="date1" >show timer1</p>
<p class="date2" >show timer2</p>
<p class="..." >...</p>
<p class="date14" >show timer14</p>
编辑:
此外,我想知道如何获得两个额外的 p
元素输出,例如
<p class="online_date0" >show text "This countdown is running right now"</p>
<p class="offline_date0 >show text "This countdown is not running at the moment</p>
... 拥有类似 "on air" 的指标。谢谢!
编辑 2017 年 11 月 1 日
我不明白为什么这在特定的 if 函数中不起作用:
if (distance < 0) {
clearInterval(x);
document.getElementById("date" + index).className = "timerend";
document.getElementById("outofdate" + index).className = "timerend";
document.getElementById("date" + index).innerHTML = "00:00:00:00";
在 HTML 文档中,日期 + 索引 p
s 有一个 class,它在添加 timerend 时被删除。如果我在 clearInterval(x)
之后的第一行中的 =
之前添加 +
,则旧的 class 会保留,但每秒都会添加新的 class。当然,我只想添加一次。如果我不在该行的 =
之前放置 +
,那么旧的 class 当然会被删除。
由于我开始学习Js,所以我想了解这里发生了什么。我错过了什么?
我只想向每个具有索引 ID 的 p
添加一个 class,以便它在计时器结束时改变颜色。它有效,但它删除了我在 class 索引的 p
中放置的所有其他格式。
HTML
<p id="date0" class="dates"></p>
在CSS中,我在.dates
中添加了padding等。我读过有关添加 classes 并保留原件的信息,但显然无法理解解决方案。
这是一个带有 8 个定时器的演示
将您的逻辑重构为接受 元素节点 和
countDownDate
的方法
将
data-countDownDate
毫秒值放入元素本身。迭代定时器并初始化它们。
//var countDownDate = new Date("Oct 22, 2019 14:00:00").getTime();
[].slice.call( document.querySelectorAll( ".dateTimer" ) ).forEach( function( element ){
startTimer(element, Number(element.getAttribute( "data-countDownDate" )) );
});
function startTimer(element, countDownDate) {
// Update the count down every 1 second
//console.log( element );
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) /
(1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if ((days + "").length === 1) {
days = "0" + days;
}
if ((hours + "").length === 1) {
hours = "0" + hours;
}
if ((minutes + "").length === 1) {
minutes = "0" + minutes;
}
if ((seconds + "").length === 1) {
seconds = "0" + seconds;
}
element.innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds + "";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
element.innerHTML = "Ende!";
}
}, 1000);
}
<p class="dateTimer" data-countDownDate="1509823808052"></p>
<p class="dateTimer" data-countDownDate="1509823818052"></p>
<p class="dateTimer" data-countDownDate="1509823828052"></p>
<p class="dateTimer" data-countDownDate="1509823838052"></p>
<p class="dateTimer" data-countDownDate="1509823848052"></p>
<p class="dateTimer" data-countDownDate="1509823858052"></p>
<p class="dateTimer" data-countDownDate="1509823868052"></p>
<p class="dateTimer" data-countDownDate="1509823878052"></p>
对于 "multiply" 您的代码,您可以结合使用数组和函数。
- 在您的数组中,您将定义 14 个 countDownDates。
- 例如,您可以使用 for 循环遍历此数组
- 您可以将当前的 countDownDate 信息传递给将处理单个倒计时的函数,就像您的代码现在处理它的方式一样。
这是一个例子:
// defining countDownDates as an empty array :
var countDownDates = [];
// adding any count down date to your array :
countDownDates.push(new Date("Oct 24, 2017 10:49:50").getTime());
countDownDates.push(new Date("Oct 24, 2017 10:49:45").getTime());
countDownDates.push(new Date("Oct 28, 2017 10:49:45").getTime());
countDownDates.push(new Date("Oct 29, 2017 10:49:45").getTime());
countDownDates.push(new Date("Oct 30, 2017 10:49:45").getTime());
countDownDates.push(new Date("Nov 1, 2017 10:49:45").getTime());
countDownDates.push(new Date("Nov 12, 2017 10:49:45").getTime());
countDownDates.push(new Date("Nov 24, 2017 10:49:45").getTime());
// calling an init function that will build the HTML needed for every count down
init(countDownDates);
// looping through your array of countDownDates
for (var i=0;i<countDownDates.length;i++) {
// calling the countdown function, pass it the array and the current version of i as parameters
countDown(countDownDates, i);
}
/* adds, to the document, a p element for each entry in the countDownDates array */
function init(countDownDates) {
var timersDiv = document.getElementById("timers");
var dateElement;
for (var i=0;i<countDownDates.length;i++) {
dateElement = document.createElement("p");
dateElement.id = "date" + i;
timersDiv.appendChild(dateElement);
}
}
/* countDown function, your countDown handling code within a reusable function */
function countDown(countDownDates, index) {
var x = setInterval(function() {
var now, distance, days, hours, minutes, seconds, x;
now = new Date().getTime();
distance = countDownDates[index] - now;
// Time calculations for days, hours, minutes and seconds
days = Math.floor(distance / (1000 * 60 * 60 * 24));
hours = Math.floor((distance % (1000 * 60 * 60 * 24)) /
(1000 * 60 * 60));
minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display days, hours, minutes and seconds in 2 digits if < 10
if((days+"").length === 1){
days = "0"+days;
}
if((hours+"").length === 1){
hours = "0"+hours;
}
if((minutes+"").length === 1){
minutes = "0"+minutes;
}
if((seconds+"").length === 1){
seconds = "0"+seconds;
}
// Display the result in the element with id date0, date1, etc.
document.getElementById("date" + index).innerHTML = days + ":" +
hours + ":"
+ minutes + ":" + seconds + "";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("date" + index).innerHTML = "Ende!";
}
}, 1000);
}
<!-- just an empty div we will add countDown elements into -->
<div id="timers">
</div>