该事件的第二次倒计时不起作用

Question

如何正确地对事件进行几次推论，但又为天，分钟和秒提供单独的标识符？ 在下面，我只有一个倒数计时，而不是两个。 如何改善呢？

</head> 
    <?php $date = date('M d, Y H:i:s', strtotime('7-3-2019 15:37:25')); ?>
    <?php $date1 = date('M d, Y H:i:s', strtotime('8-3-2019 15:37:25')); ?>

    <script>
    var count = new Date("<?php echo $date;?>").getTime();
    var count1 = new Date("<?php echo $date1;?>").getTime();
    var x = setInterval( function(){ startTimer('demo',count); }, 1000 );
    var x = setInterval( function() { startTimer('demo1',count1); }, 1000 );
    function startTimer(id,countDownDate)
    {
      var now = new Date().getTime();
      var distance = countDownDate - now;
      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);    

        document.getElementById("days").innerHTML = days;
        document.getElementById("hours").innerHTML = hours;
        document.getElementById("minutes").innerHTML = minutes;
        document.getElementById("seconds").innerHTML = seconds;

        if (distance < 0) {
        clearInterval(x);
        document.getElementById(id).innerHTML = "EXPIRED";
      }
    }
    </script>

    <body>        
    <div id="demo"> 
     <p id="days"></p>
     <p id="hours"></p>
     <p id="minutes"></p>
     <p id="seconds"></p>
    </div>          
    <div id="demo1">
     <p id="days"></p>
     <p id="hours"></p>
     <p id="minutes"></p>
     <p id="seconds"></p>   
    </div>       
        </body>
    </html>

Answer 1

答案末尾的工作版本。

在下面，我只有一个倒数计时，而不是两个。 如何改善呢？

首先，您要连续两次定义x ，从而第二次覆盖它。 如果不跟踪setInterval()调用，就无法清除它们。 当clearInterval(x); 确实会被调用，它将清除您创建的第二个间隔，但第一个间隔将继续触发。

由于间隔将在计时器内清除，因此您也应将间隔存储在计时器内。 然后，您需要将更新逻辑移至新函数（我称其为tick ），然后将计时器函数与new关键字一起使用。

如何正确地对事件进行几种推论，但如何为天，分钟和秒提供单独的标识符。

实际上，您的HTML几乎是正确的。 您只需为每个标签创建标签，然后在代码中引用它们。

但是，您将在HTML， days ， hours ， minutes和seconds重复使用ID。 您的HTML文档中任何ID只能出现1次。

尝试改用类，然后从ID传递给startTimer的元素中，使用Element.getElementsByClassName获取所需的div。

工作版本的代码：

 // These dates came from the PHP snippets in your post var count = new Date("Mar 07, 2019 15:37:25").getTime(); var count1 = new Date("Mar 08, 2019 15:37:25").getTime(); var timer1 = new Timer('demo', count); var timer2 = new Timer('demo1', count1); function Timer(id, countDownDate) { this.interval = setInterval(tick, 1000); function tick() { var now = new Date().getTime(); var distance = countDownDate - now; 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); var $elem = document.getElementById(id); $elem.getElementsByClassName("days")[0].innerHTML = 'days ' + days; $elem.getElementsByClassName("hours")[0].innerHTML = 'hours ' + hours; $elem.getElementsByClassName("minutes")[0].innerHTML = 'minutes ' + minutes; $elem.getElementsByClassName("seconds")[0].innerHTML = 'seconds ' + seconds; if (distance < 0) { clearInterval(this.interval); document.getElementById(id).innerHTML = "EXPIRED"; } } }

 body { font-family: sans-serif; } #demo, #demo1 { display: inline-block; width: 250px; }

 <div id="demo"> <h2>demo</h2> <p class="days"></p> <p class="hours"></p> <p class="minutes"></p> <p class="seconds"></p> </div> <div id="demo1"> <h2>demo1</h2> <p class="days"></p> <p class="hours"></p> <p class="minutes"></p> <p class="seconds"></p> </div>

该事件的第二次倒计时不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-05-09 05:45:19

工作版本的代码：

该事件的第二次倒计时不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-05-09 05:45:19

工作版本的代码：

解决方案1
0 已采纳 2018-05-09 05:45:19