Javascript HTML页面上的多（14）个倒计时don'；行不通

我想在一个HTML页面上显示14个倒计时（最好是HTML文档中的普通

p

元素）。我对JavaScript一无所知，所以我从w3schools获取了一个倒计时脚本。工作正常，不知怎的，我甚至通过搜索网络如何显示计时器两位数

下面是代码（更新！）：

编辑： 此外，我想知道如何获得两个额外的

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>

---

在CSS中，我在

.dates

中添加了填充等内容。我读过关于添加类和保留原始类的内容，但显然无法理解解决方案。

这里是一个带有8个计时器的演示

• 将逻辑重构为一个接受元素节点和倒计时日期的方法

• 将

  数据倒计时日期

  毫秒值放入元素本身

• 迭代计时器并初始化它们

//var countDownDate=新日期（“2019年10月22日14:00:00”）.getTime（）；
[].slice.call（document.querySelectorAll（“.dateTimer”））.forEach（函数（元素）{
startTimer（元素，数字（element.getAttribute（“数据倒计时”））；
});
函数startTimer（元素，倒计时日期）{
//每1秒更新一次倒计时
//控制台日志（元素）；
var x=setInterval（函数（）{
var now=new Date（）.getTime（）；
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（距离%（1000*60*60*24））/
(1000 * 60 * 60));
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
如果（（天+“”）。长度==1）{
天数=“0”+天；
}
如果（（小时+“”）。长度==1）{
小时数=“0”+小时数；
}
如果（（分钟+“”）。长度==1）{
分钟=“0”+分钟；
}
如果（（秒+“”）。长度==1）{
秒=“0”+秒；
}
element.innerHTML=days+“：“+hours+”：“+minutes+”：“+seconds+”；
//如果倒计时结束，写一些文字
如果（距离<0）{
净间隔（x）；
element.innerHTML=“Ende！”；
}
}, 1000);
}

要“乘法”代码，可以结合使用数组和函数

• 在数组中，您将定义14个倒计时日期
• 例如，可以使用for循环遍历该数组
• 您可以将当前的倒计时日期信息传递给处理单个倒计时的函数，就像您的代码现在处理它的方式一样

下面是一个例子：

//将倒计时日期定义为空数组：
var倒计时=[]；
//将任何倒计时日期添加到阵列：
倒计时日期.push（新日期（“2017年10月24日10:49:50”）.getTime（）；
倒计时日期.push（新日期（“2017年10月24日10:49:45”）.getTime（）；
倒计时日期.push（新日期（“2017年10月28日10:49:45”）.getTime（）；
倒计时日期.push（新日期（“2017年10月29日10:49:45”）.getTime（）；
倒计时日期.push（新日期（“2017年10月30日10:49:45”）.getTime（）；
倒计时日期.push（新日期（“2017年11月1日10:49:45”）.getTime（）；
倒计时日期.push（新日期（“2017年11月12日10:49:45”）.getTime（）；
倒计时日期.push（新日期（“2017年11月24日10:49:45”）.getTime（）；
//调用init函数，该函数将生成每次倒计时所需的HTML
初始化（倒计时）；
//在倒计时日期数组中循环
对于（var i=0；i不幸的是，我不了解任何JavaScript，但在这种方法中，如果有一种方法可以将特定日期和时间确定为精确的秒，那么这可能是解决方案。我需要设置，即“月-日，年-小时：分钟：秒”因此，单个计时器会精确显示到该特定时刻的时间。是否有任何方法可以更改脚本，以便我只需键入类似于
那么输出将是06:20:49:24？我建议您使用时间戳毫秒值。将字符串传递到日期构造函数可能会有一些警告，而且它还包括额外的解析步骤。我已经阅读了时间戳，它非常有趣–尽管它对于我这个绝对的初学者来说太复杂了。谢谢您在我的文章中所做的努力JavaScript是我的下一个目标，在此之前我甚至害怕它，因为它看起来非常困难。谢谢！这也非常接近！有没有办法让计时器单独出来？或者把每个计时器的输出放在特定的
p
中，而不是把所有计时器放在
中？每个计时器都是在一个特定的p元素中。所有的p元素都在'timers'div中，但它们可以放在其他任何地方。我为错误的问题感到抱歉。我需要通过css单独选择那些
p
元素。也许我太笨了，但在您的演示中，我可以通过
div\timers p{}选择所有
p
。对于我的项目，我有14个日期，每一天有两个。我想把计时器按顺序放在日期旁边。例如，星期二：2017年10月24日，17:00:00:00。编辑时间：事实上我太笨了！我刚得到它，我可以通过css单独选择它们。对不起！剩下的是我不知道如何进行编辑在我的网页上单独操作计时器。我想我需要
<p class="date1" >show timer1</p>
<p class="date2" >show timer2</p>
<p class="..." >...</p>
<p class="date14" >show timer14</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>

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";

<p id="date0" class="dates"></p>