javascript - 如何为多个元素制作倒计时时钟？

Question

下面是我的 php 代码，它连接到我的数据库并收集信息并将其显示为 html 表。但唯一的问题是所有倒计时时钟都倒计时到一个日期。请帮助我，让每个时钟都为个人毕业日期倒计时。

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "graduation";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT id, name, date, status FROM student";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
echo "<table><tr><th>ID</th><th>Name</th><th>Date of Graduation</th><th>Count-Down-Clock</th></tr>";
// output data of each row
while($row = $result->fetch_assoc()) {
    echo "<tr><td>".$row["id"]."</td><td>".$row["name"]."</td><td>".$row["date"]."</td><th><p class='demo'></p></th></tr>";
}
echo "</table>";
} else {
echo "0 results";
}
$conn->close();
?>

下面是我的 JavaScript 代码，它使

成为倒计时时钟。

<script>



// Set the date we're counting down to
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();

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

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

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

// Time calculations for days, hours, minutes and seconds
 var d = Math.floor(dif / (1000 * 60 * 60 * 24));
 var h = Math.floor((dif % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
 var m = Math.floor((dif % (1000 * 60 * 60)) / (1000 * 60));
 var s = Math.floor((dif % (1000 * 60)) / 1000);

 var formatted = d + "d " + h + "h " + m + "m " + s + "s ";
// Output the result in an element with id="demo"
    [...document.querySelectorAll(".demo")].forEach(el => el.innerHTML = dif < 0 ? "Expired" : formatted);




    // If the count down is over, write some text 
    if (dif < 0) {
    clearInterval(x);

    }
}, 1000);
</script>

Answer 1

问题:

• var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();是硬编码的
• 所有 .demo 使用相同的 HTML 结果文本。元素

解决方案:

在您有 <td>".$row["date"]."</td> 的代码中代替:

<td>
    <div data-date='". $row["date"] ."'></div>
</td>

JS 应该读取每个元素 [data-date]它是自己的data-date值并将其用作倒计时开始；而不是当前硬编码的 new Date("Sep 5, 2018 15:37:25").getTime();

这是修改后的 JS 的示例:

function countDown(el) { // Create a function that recieves the element as argument

  var countDownDate = new Date(el.dataset.date).getTime();

  var x = setInterval(function() {

    var now = new Date().getTime();
    var dif = countDownDate - now;
    var d = Math.floor(dif / (1000 * 60 * 60 * 24));
    var h = Math.floor((dif % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var m = Math.floor((dif % (1000 * 60 * 60)) / (1000 * 60));
    var s = Math.floor((dif % (1000 * 60)) / 1000);

    var formatted = d + "d " + h + "h " + m + "m " + s + "s ";
    // Output the result in the argument element
    el.innerHTML = dif < 0 ? "Expired" : formatted;

    // If the count down is over, stop Intervals
    if (dif < 0) {
      clearInterval(x);
    }
  }, 1000);

}

// Init countDown!
[...document.querySelectorAll("[data-date]")].forEach(el => countDown(el));

<table>
  <tr>
    <td>
      John
    </td>
    <td>
      <div data-date='Oct 20, 2018 12:00:00'></div>
    </td>
  </tr>
  <tr>
    <td>
      Peter
    </td>
    <td>
      <div data-date='Sep 5, 2018 15:37:25'></div>
    </td>
  </tr>
</table>