我在数据库中有多个事件,我想为每个事件创建一个倒计时。
问题是我不知道如何创建多个计时器,每个使用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/