我在数据库中有多个事件,我想为每个事件创建一个倒计时。
问题是我不知道如何创建多个计时器,每个使用PHP的日期都会创建一个计时器。

当我只有一个计时器并且第一个想法也仅适用于第一个计时器时,它起作用,但是其余的都不出现。

一种想法是为每个元素执行脚本:

<?php include('config.php'); ?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<style>
.timer {
  color: #F6F4F3;
}
.days, .hours, .minutes, .seconds {
  display: inline-block;
}
</style>
</head>

<body>
<?php
$var=0;
$query="SELECT * FROM events  WHERE events.date<CURRENT_DATE() LIMIT 9";
$res= mysqli_query($connect,$query);
while($row = mysqli_fetch_assoc($res)){
$formatted = $row['date'] =  date('Y/m/d H:i:s');
$var++;
?>
<div class="row">
  <div class="col-md-4">
     <div class="card">
        <div class="card-body">
                 <p class="card-text">Event date:  <i>2019-07-20 15:27</i></p>
            </div>
            <div id="timer<?php echo $var; ?>" class="card-deck" ></div>
            <script>
            const year = new Date().getFullYear();
const dat = new Date("<?php echo $formatted; ?>");

  let timer = setInterval(function() {
  const today = new Date().getTime();
  const diff = dat - today;

  let days = Math.floor(diff / (1000 * 60 * 60 * 24));
  let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((diff % (1000 * 60)) / 1000);

  document.getElementById("timer<?php echo $var; ?>").innerHTML =
    "<div class=\"card days\"> \<div class=\"numbers\">" + days + "</div>days</div> \<div class=\"card hours\"> \
  <div class=\"numbers\">" + hours + "</div>hours</div> \<div class=\"card minutes\"> \
  <div class=\"numbers\">" + minutes + "</div>minutes</div> \<div class=\"card seconds\"> \
  <div class=\"numbers\">" + seconds + "</div>seconds</div> \</div>";

}, 1000);
            </script>
        </div>
      </div>
  </div>
</div>
<?php } ?>
</body>

</html>


第二个是创建一个函数并每次调用它:

<?php include('config.php'); ?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<style>
.timer {
  color: #F6F4F3;
}

.days, .hours, .minutes, .seconds {
  display: inline-block;
}
</style>
</head>

<body>
<?php
$var=0;
$query="SELECT * FROM events  WHERE events.date<CURRENT_DATE() LIMIT 9";
$res= mysqli_query($connect,$query);
while($row = mysqli_fetch_assoc($res)){
$formatted = $row['date'] =  date('Y/m/d H:i:s');
$var++;
?>
<div class="row">
  <div class="col-md-4">
     <div class="card">
        <div class="card-body">
                 <p class="card-text">Event date:  <i>2019-07-20 15:27</i></p>
            </div>
            <div id="timer<?php echo $var; ?>" class="card-deck" ></div>
            <script>var x=<?php echo $formatted; ?>;
                    countdown(x);
            </script>
        </div>
      </div>
  </div>
</div>
<?php } ?>
<script>
function countdown(param){
            const year = new Date().getFullYear();
const dat = new Date("<param");

  let timer = setInterval(function() {
  const today = new Date().getTime();
  const diff = dat - today;

  let days = Math.floor(diff / (1000 * 60 * 60 * 24));
  let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((diff % (1000 * 60)) / 1000);

  document.getElementById("timer<?php echo $var; ?>").innerHTML =
    "<div class=\"card days\"> \<div class=\"numbers\">" + days + "</div>days</div> \<div class=\"card hours\"> \
  <div class=\"numbers\">" + hours + "</div>hours</div> \<div class=\"card minutes\"> \
  <div class=\"numbers\">" + minutes + "</div>minutes</div> \<div class=\"card seconds\"> \
  <div class=\"numbers\">" + seconds + "</div>seconds</div> \</div>";

}, 1000);
}
            </script>
</body>

</html>

最佳答案

作为个人偏好,我将首先执行所有PHP循环(还将DB查询分离到其自己的函数中),并将class属性添加到timer元素。然后,在脚本部分中,我将使用querySelectorAll获取所有计时器元素,将它们循环并在每个元素上执行计时器功能。可以将事件日期放入data属性中,该属性将由timer函数读取。所有这些将使代码对正在发生的事情更加清晰明了。

像这样

<?php include('config.php');

function get_events() {
  $out = array();
  $query="SELECT * FROM events  WHERE events.date<CURRENT_DATE() LIMIT 9";
  $res= mysqli_query($connect,$query);
  while( $row = mysqli_fetch_assoc($res) ){
    $out[] = $row;
  }
  return $out;
}

$events = get_events();

?>
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.min.js"></script>
    <style>
      .timer {
        color: #F6F4F3;
      }
      .days, .hours, .minutes, .seconds {
        display: inline-block;
      }
    </style>
  </head>

  <body>

  <?php if ( $events ) : ?>
    <div class="row">
      <?php foreach ( $events as $index => $event ) : ?>
      <div class="col-md-4">
         <div class="card">
            <div class="card-body">
              <p class="card-text">Event date:  <i><?php echo $event['date']; ?></i></p>
              <div id="timer<?php echo $index; ?>" class="card-deck timer-wrap" data-event-date="<?php echo $event['date']; ?>"></div>
            </div>
          </div>
      </div>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>

  <script>

    initTimers('.timer-wrap');

    function initTimers(selector) {
      var timers = document.querySelectorAll(selector);
      if ( timers.length > 0) {
        for (var i = 0; i < timers.length; i++) {
          countdown( timers[i] );
        }
      }
    }

    function countdown(timerElem){
      const year = new Date().getFullYear();
      const dat = new Date(timerElem.dataset.eventDate);

      let timer = setInterval(function() {
        const today = new Date().getTime();
        const diff = dat - today;

        let days = Math.floor(diff / (1000 * 60 * 60 * 24));
        let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        let seconds = Math.floor((diff % (1000 * 60)) / 1000);

        timerElem.innerHTML =
          "<div class=\"card days\"> \<div class=\"numbers\">" + days + "</div>days</div> \<div class=\"card hours\"> \
        <div class=\"numbers\">" + hours + "</div>hours</div> \<div class=\"card minutes\"> \
        <div class=\"numbers\">" + minutes + "</div>minutes</div> \<div class=\"card seconds\"> \
        <div class=\"numbers\">" + seconds + "</div>seconds</div> \</div>";

      }, 1000);
    }

  </script>

  </body>

</html>

关于javascript - 如何为每个php创建的元素执行脚本?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58042614/

10-12 12:24
查看更多