我有这个代码,可以让我倒计时到比赛开始时间。
他们怎么都显示相同的倒计时时间。
每一行都有自己的匹配 ID。
Question How to make sure that the countdown timer works for each row and not the same time
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<table class="table table-striped table-bordered">
<tbody id="upandcoming">
<?php foreach ($races as $race) {?>
<tr>
<td></td>
<td><b>M<?php echo $race['meeting_number'];?></b></td>
<td><b>R<?php echo $race['racing_number'];?></b></td>
<td><b><?php echo $race['meeting_name'];?></b></td>
<td><div id="race<?php echo $race['race_id'];?>"></div>
</td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<?php foreach ($races as $race) {?>
<script>
// Set the date we're counting down to
var countDownDate = new Date("<?php echo date('M j, Y H:i:s', strtotime($race['racing_datetime']));?>").getTime();
// 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);
// Output the result in an element with id="demo"
document.getElementById("race<?php echo $race['race_id'];?>").innerHTML = hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("race<?php echo $race['race_id'];?>").innerHTML = "EXPIRED";
}
}, 1000);
</script>
<?php }?>
最佳答案
通过打印多个 script
标记,您将在全局范围内一遍又一遍地重新定义 countDownDate
,从而覆盖先前副本的值。所有计数器使用的值是最后设置的值。
输出多个带有重复代码的脚本标签,更不用说为每个脚本标签创建一个计时器,效率非常低。相反,我建议您将信息输出为一个数组,并在该数组上使用一个计时器循环来创建所有倒计时。
<script>
// Set the date we're counting down to
var countdowns = [
<?php foreach ($races as $race) {?>
{
id: <?php $race['race_id'] ?>,
date: new Date("<?php echo date('M j, Y H:i:s', strtotime($race['racing_datetime']));?>").getTime()
}
<?php }?>
];
// Update the count down every 1 second
var timer = setInterval(function() {
// Get todays date and time
var now = Date.now();
var index = countdowns.length - 1;
// we have to loop backwards since we will be removing
// countdowns when they are finished
while(index >= 0) {
var countdown = countdowns[index];
// Find the distance between now and the count down date
var distance = countdown.date - 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);
var timerElement = document.getElementById("race" + countdown.id);
// If the count down is over, write some text
if (distance < 0) {
timerElement.innerHTML = "EXPIRED";
// this timer is done, remove it
countdowns.splice(index, 1);
} else {
timerElement.innerHTML = hours + "h " + minutes + "m " + seconds + "s ";
}
index -= 1;
}
// if all countdowns have finished, stop timer
if (countdowns.length < 1) {
clearInterval(timer);
}
}, 1000);
</script>
关于javascript - 在 foreach 循环中使用 jquery 和 php 倒数计时器不显示正确的时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49063776/