我在网站上显示来自MySQL数据库的对象。
每个对象都有一个截止日期datetime字段（称为termina）。
我有一个while循环来显示每个项目：
<?php
global $mysqli;
$loop = mysqli_query($mysqli, "SELECT sub.titulo AS titulo,
sub.referencia AS referencia,
sub.descripcion AS descripcion,
make.name AS marca,
model.name AS modelo,
gen.name AS generacion,
serie.name AS serie,
mot.name AS motor,
sub.foto AS foto,
sub.termina AS termina,
sub.id_subasta AS id_subasta
FROM tb_subastas sub
LEFT JOIN car_make make ON sub.marca = make.id_car_make
LEFT JOIN car_model model ON sub.modelo = model.id_car_model
LEFT JOIN car_generation gen ON sub.generacion = gen.id_car_generation
LEFT JOIN car_serie serie ON sub.serie = serie.id_car_serie
LEFT JOIN car_trim mot ON sub.motor = mot.id_car_trim")
or die (mysqli_error($mysqli));
$orden = 0;
$resultado = $loop ->num_rows;
if ($resultado == 0){
?> <div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-6">
<p>NO HAY SUBASTAS</p>
</div>
</div>
</div>
</div>
<?php
}
while ($row = mysqli_fetch_array($loop))
{
?>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-6">
<H3><?php echo $row['titulo']?></H3>
</div>
<div class="col-md-6">
<H2 >Ref.: <?php echo $row['referencia']?></H2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p><?php echo $row['descripcion']?></p>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-1">
<p><strong>Marca: </strong><?php echo $row['marca']?></p>
</div>
<div class="col-md-2">
<p><strong>Modelo: </strong><?php echo $row['modelo']?></p>
</div>
<div class="col-md-2">
<p><strong>Generación: </strong><?php echo $row['generacion']?></p>
</div>
<div class="col-md-2">
<p><strong>Serie: </strong><?php echo $row['serie']?></p>
</div>
<div class="col-md-2">
<p><strong>Motor: </strong><?php echo $row['motor']?></p>
</div>
</div>
<div class="row">
<div class="col-md-3" style="background-color: black">
<img style="width: 100%;height: auto;align-self: " src=".../<?php echo $row['foto']?>">
</div>
<div class="col-md-9">
<p><strong>Termina: </strong><?php echo $row['termina']?></p>
<style>
#clockdiv<?php echo $row['id_subasta']?>{
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv<?php echo $row['id_subasta']?> > div{
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
}
#clockdiv<?php echo $row['id_subasta']?> div > span{
padding: 15px;
border-radius: 3px;
background: #00816A;
display: inline-block;
}
smalltext{
padding-top: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Countdown Clock</h1>
<div id="clockdiv<?php echo $row['id_subasta']?>">
<div>
<span class="days<?php echo $row['id_subasta']?>" id="day<?php echo $row['id_subasta']?>"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours<?php echo $row['id_subasta']?>" id="hour<?php echo $row['id_subasta']?>"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes<?php echo $row['id_subasta']?>" id="minute<?php echo $row['id_subasta']?>"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds<?php echo $row['id_subasta']?>" id="second<?php echo $row['id_subasta']?>"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
<p id="demo<?php echo $row['id_subasta']?>"></p>
<script>
var deadline=0;
var deadline = new Date("<?php echo $row['termina']?>").getTime();
//alert(deadline);
var x = setInterval(function() {
var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("day<?php echo $row['id_subasta']?>").innerHTML =days ;
document.getElementById("hour<?php echo $row['id_subasta']?>").innerHTML =hours;
document.getElementById("minute<?php echo $row['id_subasta']?>").innerHTML = minutes;
document.getElementById("second<?php echo $row['id_subasta']?>").innerHTML =seconds;
if (t < 0) {
clearInterval(x);
document.getElementById("demo<?php echo $row['id_subasta']?>").innerHTML = "TIME UP";
document.getElementById("day<?php echo $row['id_subasta']?>").innerHTML ='0';
document.getElementById("hour<?php echo $row['id_subasta']?>").innerHTML ='0';
document.getElementById("minute<?php echo $row['id_subasta']?>").innerHTML ='0' ;
document.getElementById("second<?php echo $row['id_subasta']?>").innerHTML = '0'; }
}, 1000);
</script>
<input type="button" class="btn btn-primary btn-lg btn-block" value="CREAR NUEVA SUBASTA" onclick="location.href = 'ficha_subasta.php';">
</div>
</div>
</div>
</div>
<?php
}
?>
我想将对象显示为以下屏幕截图：
问题是所有倒数计时器都显示相同的剩余时间，但它们应该不同。
我找不到原因
最佳答案
我遇到了同样的问题，目前您正在与所有循环共享一个共同的截止日期。
您需要将更新时间JavaScript移出当前循环
使用每个termina记录的隐藏字段，在所有计时器的setInterval函数内部将单独的循环添加到其各自的termina
关于javascript - 带有多个倒数计时器的网页，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51562708/