javascript - 带有多个倒计时器的网页-6ren

javascript - 带有多个倒计时器的网页

转载作者：行者123 更新时间：2023-12-03 01:25:35

我正在网站中显示来自 MySQL 数据库的对象。每个对象都有一个截止日期时间字段(称为 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 移出当前循环
使用每个终端记录的隐藏字段将所有计时器上的 setInterval 函数内的单独循环添加到各自的终端

关于javascript - 带有多个倒计时器的网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51562708/

文章推荐： javascript - 文件输入未正确更新状态 React？

文章推荐： javascript - 使用多个 addMethod jquery

android - 如何在黑色条码android上扫描白色(倒 jar )？
我想在 android 中扫描黑底白字条码。我使用过 zxing，它允许我只扫描白底黑字。我如何扫描和倒置条形码或使用哪个库？感谢您的帮助。最佳答案如果您仍在引用 journeyapps 嵌入式
c++ - 倒 X 轴 OpenGL
所以我在 youtube 上观看了一些介绍性类(class)以学习 OpenGL 的基础知识并学习了诸如制作三角形和简单相机类等内容。我一直想尝试制作体素引擎，这显然是第一个我想做的是一个我最终可以复
html - 倒 Angular 边框不同容器颜色 CSS
这个问题在这里已经有了答案: Div with cut out edges, border and transparent background (6 个答案) 关闭 8 年前。
html - 倒 Angular/圆 Angular 图像 HTML
我有一张图片，我正在查看用 HTML 创建的小型网站的基本定制。我知道您可以对图像进行倒 Angular 处理，如 this question here 中所示，这给出了 45 度切割。我希望每个
iphone - iOS 中的自定义形状(倒 T)边框 Uiview
我必须在 iOS 上创建一个自定义形状(倒 T)边框的 Uiview。我附上下面的截图。我进行了很多研究，找到了一种使用 here 中的 UIBezierPath 的方法. 但我不知道如何将我的 Vi

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 带有多个倒计时器的网页