Question

我想显示我从数据库创建的某些事件的倒数计时器（仅一天）。它有效，但仅显示数据库中最新数据的倒计时，并在错误的事件上显示。有什么方法可以创建多个倒数计时器？

<div class="row">
    <?php
    $query_event = mysqli_query($conn, "select EStart, EEnd, EId, EDesc, 
    EName from acara")or die(mysqli_error($conn));

    while($row = mysqli_fetch_array($query_event)){
      $id = $row['EId'];
      $startdate = $row['EStart'];   

    ?>

    <h5 class="media-heading"><mark><?php echo $row['EName']; ?></mark></h5>
    <p><?php echo $row['EDesc']; ?></p>

     <!-- this is where the countdown timer should display -->
    <div id="demo"></div>
    <br><br><br>


    <?php } ?>

   </div><!--end div row -->

<script>

var countDownDate = <?php echo strtotime($startdate) ?> * 1000;
var now = <?php echo time() ?> * 1000;

var x = setInterval(function() {

    now = now + 1000;
    var distance = countDownDate - now;

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));

    document.getElementById("demo").innerHTML ="Event will start in "+ days + " more " ;

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

预期结果：

正在运行，跑步活动活动将在4天内开始

跳跃，跳跃事件活动将在5天内开始

我得到了什么：

正在运行，跑步活动活动将在5天（错误的活动日期）内开始

跳跃，跳跃事件 //几天不显示任何文本

Answer 1

如果所有div都具有ID演示（<div id="demo"></div>），那么该document.getElementById("demo")将会返回什么？可能是它在DOM中遇到的第一个“演示”，它只会返回一个对象。

来自MDN doc: [已添加重点]：

如果id值不是空字符串，则它必须是唯一文档。

也许通过name属性对div进行“分组”，并在函数中的document.getElementsByName('yournamehere')上进行迭代。

如何使用数据库中的日期创建其他倒数计时器？

1 个答案: