javascript - HTML 页面上的多个 (14) 倒计时不起作用

Question

我想在单个 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 次，并将第一行代码更改为特定的 future 日期 - 因此相同的倒计时显示了 14 次。

有没有办法将第一行以某种方式乘以 14 次，以便在 14 个不同的 p 元素中通过 14 个 ID 来计数 14 个不同的特定日期？ 例如

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

...有像“正在播出”这样的指示器。谢谢!

编辑于 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 有一个类，该类在添加 timeend 时被删除。如果我在 clearInterval(x) 之后的第一行中的 = 之前添加 +，则旧类会保留，但新类会每秒添加一次。当然我只想添加一次。如果我不在该行中的 = 之前放置 +，那么旧类当然会被删除。 由于我开始学习 Js，我想了解这里发生的事情。我错过了什么？ 我只想为每个带有索引 id 的 p 添加一个类，以便它在计时器结束时改变颜色。它有效，但它删除了我通过那些索引 p 具有的类放置的所有其他格式。

HTML

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

在 CSS 中，我将填充等放入 .dates 中。我读过有关添加类并保留原始内容的内容，但显然无法理解解决方案。

Answer 1

这是一个带有 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>