Question

我正在建立一个网站，用户发布文字帖子，每个帖子都有一个倒数计时器，每个都有不同的。我遇到了一个问题，我只能运行一个计时器。

我有一个函数可以根据数据库中的帖子和当前时间来获取时间。 php文件遍历每个帖子并调用时间函数来获取每个帖子的时间。但是它只创建一个计时器。

计时器的代码

function getTime($conn, $pid){
        $countDownDate;
        $sql = "SELECT * FROM userposts";
        $result = mysqli_query($conn,$sql);
        while ($row = $result->fetch_assoc()){
            if ($row['pid'] == $pid){ // getting the row of the user
                $countDownDate = $row['time'];
            }
        }
        echo "<p style='color:black' id='demo'></p>
            <script>

            // Set the date we're counting down to
            var countDownDate = new Date('".$countDownDate."');

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

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

              // Display the result in the element with id='demo'
              document.getElementById('demo').innerHTML = days + 'd ' + hours + 'h '
              + minutes + 'm ' + seconds + 's ';

              // If the count down is finished, write some text
              if (distance < 0) {
                clearInterval(x);
                document.getElementById('demo').style.color = 'red';
                document.getElementById('demo').style.fontWeight = '900';
                document.getElementById('demo').innerHTML = 'EXPIRED';
              }
            }, 1000);
            </script></br>";
    }

为每个帖子腾出时间的代码

function getPosts(){

    while ($row = $result->fetch_assoc()){
        echo "<div class='post-box'><p>";

        // displaying time
        getTime($conn,$row['pid']);

        echo "</p></div>";
    }
}

它只显示循环中第一篇文章的时间

Answer 1

尝试使用

class="demo"

而不是

id="demo"

id属性指定HTML元素的唯一ID（值在HTML文档中必须是唯一的）。校验 How to use HTML id Attribute

Answer 2

我将用此函数更改getTime函数，因为我认为您从该表中仅获得一条记录：

function getTime($conn, $pid){
    $countDownDate;
    $sql = "SELECT * FROM userposts WHERE pid = '" . $pid . "'";
    $result = mysqli_query($conn, $sql);
    $row = $result->fetch_assoc();
    $countDownDate = $row['time'];

    echo '<p style="color: black;" class="counter" data-countdowndate="' . $countDownDate . '"></p><br />';
}

然后，所有计数器的Javascript代码将只被写入一次，这是一个有效的示例：

var counters = document.getElementsByClassName('counter');
var intervals = new Array();

for (var i = 0, lng = counters.length; i < lng; i++) {
  (function(i) {
  	var x = i;
    
    // Update the count down every 1 second
    intervals[i] = setInterval(function() {
      var counterElement = counters[x];
      var counterDate = counterElement.dataset.countdowndate;

      // Set the date we're counting down to
      var countDownDate = new Date(counterDate);

      // Get current date and time
      var now = new Date().getTime();

      // 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);

      // Display the result in the element with id='demo'
      counterElement.innerHTML = days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's';

      // If the count down is finished, write some text
      if (distance < 0) {
        clearInterval(intervals[x]);
        counterElement.style.color = 'red';
        counterElement.style.fontWeight = '900';
        counterElement.innerHTML = 'EXPIRED';
      }
    }, 1000);
  })(i);
}

<span style="color:black" class="counter" data-countdowndate="2018-12-06 01:08:28"></span><br />
<span style="color:black" class="counter" data-countdowndate="2018-12-12 11:07:29"></span><br />
<span style="color:black" class="counter" data-countdowndate="2018-12-13 12:06:30"></span><br />
<span style="color:black" class="counter" data-countdowndate="2018-12-14 13:05:31"></span><br />
<span style="color:black" class="counter" data-countdowndate="2018-12-15 14:04:32"></span><br />

PHP多个计时器函数实例

2 个答案: