Question

我正在网站上显示来自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
}
?>

我要显示以下屏幕截图中的对象：

问题在于所有倒数计时器都显示相同的剩余时间，但是它们应该不同。

我无法找到原因

Answer 1

我遇到了同样的问题，目前您与所有循环共享一个共同的截止日期。

您需要将更新时间JavaScript移出当前循环
使用每个终端记录的隐藏字段，在所有计时器的setInterval函数内的单独循环中添加单独的循环

带有多个倒数计时器的网页

1 个答案: