如何在循环javascript中显示倒计时？答案

【问题标题】：How to display count down in loop javascript?如何在循环javascript中显示倒计时？
【发布时间】：2018-10-31 11:11:56
【问题描述】：

我在 php 文件中有这个

<body>
     <span id="time"></span> 
</body>
<?php $var0 = 1; ?>

这在 javascript 中

   function startTimer(duration, display) {
        var timer = duration, minutes, seconds;
        setInterval(function () {
            minutes = parseInt(timer / 60, 10)
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            if(minutes <= 0){
                 display.textContent = seconds + "s";
            }else{
                 display.textContent = minutes + "m " + seconds + "s";
            }


            if (--timer < 0) {
                timer = duration;
            }
        }, 1000);
    }
    window.onload = function () {

            var fiveMinutes = 60 * <?php echo $var0; ?>,
            display = document.querySelector('#time');
            startTimer(fiveMinutes, display);

    };

它工作得很好，但我需要在一个循环中显示它，例如我有 2 个变量，我想用新行显示两次 .. 或者当我有 n 个变量时，我得到 n 个新行和变量的时间这将保存数据库中的信息.. 谢谢

【问题讨论】：

如果它运行良好，为什么不能为两个变量调用两次startTimer()？或者，如果您有多个变量，为什么不试试for loop？
它完美地适用于一个变量..以及如何使用for循环..在window.onload或哪里？
如果您想多次显示，那么您可能希望在每次启动计时器时动态注入您的<span>s
我想创建一个拍卖并且对象有一个到期时间。
嘿 Alexandru，仅供参考，您可以发布您的工作代码作为您问题的答案。 Stack Overflow 上的规范是将问题和答案分开——有关该站点的更多信息，请参阅 meta.stackoverflow.com/questions/319747/… 或 meta.stackexchange.com/questions/74101/…。

标签： javascript php loops for-loop

【解决方案1】：

最后我解决了这个问题，我使用了与表格集成的这段代码，在这里我可以进一步开发

<table width="100%" cellspacing="0">
<tr>    
    <th class="topLine">Item(poza)</th>
    <th class="topLine">Owner</th>
    <th class="topLine">Ultimu Licitator</th>
    <th class="topLine">Pret</th>
    <th class="topLine">Timp</th>
    <th class="topLine">&nbsp;&nbsp;&nbsp;</th>
</tr>
<tr>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>

</tr>





<?php

$i =0;
foreach($auctions_inf as $auctions_information){

    $test = $auctions_information['date_expired'];
if($i%2==0) 
        {$class= "thell-a";}
        else{$class="tdunkel-a";}    

?>    
<tr class="thedata ">
    <td class="<?php echo $class; ?>">Poza mea</td>
    <td class="<?php echo $class; ?>">Zorke</td>
    <td class="<?php echo $class; ?>">Tot el</td>
    <td class="<?php echo $class; ?>">1200 yang</td>
    <td class="<?php echo $class; ?>">



<span id="countdown<?php echo $i;?>" class="timer"></span><br>

<script>
    var countDownDate<?php echo $i;?> = new Date("<?php echo $test;?>").getTime();

    var x<?php echo $i;?> = setInterval(function() {
        var now = new Date().getTime();
        var distance<?php echo $i;?> = countDownDate<?php echo $i;?> - now;
        var hours = Math.floor((distance<?php echo $i;?> % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance<?php echo $i;?> % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance<?php echo $i;?> % (1000 * 60)) / 1000);

        hours = hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;


        document.getElementById('countdown<?php echo $i;?>').innerHTML = hours +"h "+ minutes + "m " + seconds + "s ";

        if (distance<?php echo $i;?> < 0){
            clearInterval(x<?php echo $i;?>);
            document.getElementById('countdown<?php echo $i;?>').innerHTML = "Expirat";
        }


    }, 1000);

</script>  
 </td>
 <td class="<?php echo $class; ?>"> <button> Licitează </button></td>
</tr>



<?php    
  $i++;  
}


?>
</table>

【讨论】：

【解决方案2】：

这里有 5 个实时更新的跨度...

<html>
<head>
    <title>Multiple Spans</title>
    <script type="text/javascript">

        var items = 5;
        function addSpans() {

        var element = document.getElementById("container");

            for (var i = 1; i < items; i++)
            {
                var div = document.createElement('div');
                var para = document.createElement('span');
                para.id = 'span' + i;
                div.appendChild(para);
                element.appendChild(div);
            }
        }
    function startTimer(duration, display) {
            var timer = duration, minutes, seconds;
            setInterval(function () {
            minutes = parseInt(timer / 60, 10)
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;
                var displayElement = document.getElementById("span" + display);

            if(minutes <= 0){
                displayElement.textContent = seconds + "s";
            }
            else {
                displayElement.textContent = minutes + "m " + seconds + "s";
            }


            if (--timer < 0) {
            timer = duration;
            }
            }, 1000);
        }

    window.onload = function () {
        addSpans();
        var fiveMinutes = 60; 
        for (var i = 1; i < items; i++) {
            startTimer(fiveMinutes, i);
        }


         </script>
</head>
<body>
    <div id="container"> 

    </div>
</body>
</html>

【讨论】：

我用这个代码没关系，谢谢！检查主题！