定时器倒计时只运行一次不循环?

时间:2017-03-09 05:14:18

标签: javascript php

每次循环运行时,它会创建另一个表格行并显示相关数据,我想在每行的列中显示倒数计时器(以显示时间流逝)。我的下面的脚本只运行一次。你有另外的想法如何做或用这个做点什么?我在php while循环中编写了下面的代码,但只运行一次。请帮忙

<script> 
counter=0;
</script>
<?php
$count=0;
while($rowp = $resultp->fetch_assoc()) {
echo <td><p id='demo",$count,"'></p></td>
?>
<script>
var countDownDate = new Date("<?php echo $enterytime1; ?>").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = now - countDownDate;

    // 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);

    // Output the result in an element with id="demo"
    document.getElementById("demo" + counter).innerHTML = hours + "h " + minutes + "m " + seconds + "s ";

    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
</script>
<?php }
?>

4 个答案:

答案 0 :(得分:0)

是的,您必须为所有列创建新的倒计时

答案 1 :(得分:0)

可能你的if条件是true - countDownDate&gt;现在 - 它终止了间隔。

答案 2 :(得分:0)

我猜它直接进入EXPIRED吧?你的订单错了。它应该是相反的方式:

var distance = countDownDate - now;

答案 3 :(得分:0)

我将php代码替换为日期,我更改了distance计算。如果有任何变化请试试这个,然后告诉我

&#13;
&#13;
var countDownDate = new Date(2017, 2, 10, 12, 9, 40, 0).getTime();
counter = 0;
// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
  // 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);
  counter++;
  // Output the result in an element with id="demo"
  var newDiv = document.createElement("div");
  newDiv.setAttribute("id", "demo" + counter);
  var node = document.createTextNode(days + "days " + hours + "h " + minutes + "m " + seconds + "s ");
  newDiv.appendChild(node);
  if (document.getElementById("demo" + counter) != null) {
    document.getElementById("demo" + counter).innerHTML = days + "days " + hours + "h " + minutes + "m " + seconds + "s ";
  } else {
    document.body.appendChild(newDiv);
  }
  if (counter > 10)
    counter = 0;

}, 1000);
&#13;
div {
  border: 1px black solid;
}
&#13;
<div id='demo'></div>
&#13;
&#13;
&#13;