Question

我在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个变量时间的新行这将保存数据库中的信息..谢谢

Answer 1

此处的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>

Answer 2

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

<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>

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

2 个答案: