代码的工作版本：

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文档中只应出现1个ID。

尝试使用类，然后，从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 个答案:

代码的工作版本：