Question

我有一个包含4行的表，每行都有日期，时间和时间值。我已经包含了JavaScript脚本来检查过期时间并根据数据库中的4行输入值显示倒计时。

该脚本运行正常，但问题是它仅显示倒数第一行而忽略其余行。请在下面检查我的代码，看看可能会丢失什么。我是javascript新手，尝试阅读其他解决方案，但找不到使它正常工作的方法。

<?php
$sql = "SELECT * FROM post";
$result = $conn->query($sql);
if($result->num_rows > 0) {
  while($row = $result->fetch_assoc()) {
?>

<?php 
    $date = $row['date'];
    $h = $row['h'];
    $m = $row['m'];
    $s = $row['s']; ?>

    <ul class="demo">
      <li><a href="#">

          <div class="col-md-6">
            <h3><?php echo $row['title']; ?> </h3>

            <div id="demo"></div>
            <!-- <p id="demo<?=$row['id']?>"></p> -->



        </a>
        <div class="clearfix"></div>
      </li>
    </ul>

<?php
  }
}
?>


<script>
  var countDownDate = <?php echo strtotime("$date $h:$m:$s" ) ?> * 1000;
  var now = <?php echo time() ?> * 1000;

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

    // Get todays date and time
    // 1. JavaScript
    // var now = new Date().getTime();
    // 2. PHP
    now = now + 1000;

    // Find the distance between now an the count down date
    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);

    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + "d " + 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>

image

在每行中显示倒数时间有问题

0 个答案: