0

我有一个让我发疯的小问题，我正在从 mysql 数据库中检索记录并显示这些记录，在每条记录下应该有一个倒计时 javascript 时钟，它从 mysql 中获取值它只适用于第一条记录和其他记录只有 text ，这里是 HTML ， PHP 和 JS ：

<a>
    <div>
    <? echo $row['Device Name']; ?>
    </div>
    <? $Remain = $row['Remaining Time']; ?>
    <font color="red" size="6"><span id="countdown"> <? echo $Remain; ?></span></font>
    <img src="img/stop.png" /> 
    </a>  



<script type="text/javascript">

    // Initialize clock countdowns by using the total seconds in the elements tag

   secs       =  parseInt(document.getElementById('countdowno').innerHTML,10);
   setTimeout("countdown('countdowno',"+secs+")", 1000);




    /**
     * Countdown function
     * Clock count downs to 0:00 then hides the element holding the clock
     * @param id Element ID of clock placeholder
     * @param timer Total seconds to display clock
     */
    function countdown(id, timer){
        timer--;
        minRemain  = Math.floor(timer / 60);
        secsRemain = new String(timer - (minRemain * 60));
        // Pad the string with leading 0 if less than 2 chars long
        if (secsRemain.length < 2) {
            secsRemain = '0' + secsRemain;
        }

        // String format the remaining time
        clock      = minRemain + ":" + secsRemain;
        document.getElementById(id).innerHTML = clock;
        if ( timer > 0 ) {
            // Time still remains, call this function again in 1 sec
            setTimeout("countdown('" + id + "'," + timer + ")", 1000);
        } else {
            // Time is out! Hide the countdown
            document.getElementById(id).style.display = 'none';
        }

    }
</script>

请帮助我能够使 js 计数器为每条记录工作谢谢

4

2 回答 2

0

HTML 元素的 id 应该是唯一的，如果您想通过一个名称选择所有想要的元素，则可以使用 class 代替。

<span id="countdown">

您可以添加类：

<span class="countdown">
于 2013-04-02T11:13:05.677 回答
0

问题是您将 idcountdown用于多个跨度，但每个人都必须有另一个唯一的 id，因此您可以指向每个。

<?php $id = uniqid(); /* create unique id for each row */ ?>
<a>
    <div>
    <? echo $row['Device Name']; ?>
    </div>
    <? $Remain = $row['Remaining Time']; ?>
    <font color="red" size="6"><span id="countdown_<?php echo $id; ?>"> <? echo $Remain; ?></span></font>
    <img src="img/stop.png" /> 
    </a>  



<script type="text/javascript">

    // Initialize clock countdowns by using the total seconds in the elements tag

   secs       =  parseInt(document.getElementById('countdown_<?php echo $id; ?>').innerHTML,10);
   setTimeout("countdown('countdown_<?php echo $id; ?>',"+secs+")", 1000);




    /**
     * Countdown function
     * Clock count downs to 0:00 then hides the element holding the clock
     * @param id Element ID of clock placeholder
     * @param timer Total seconds to display clock
     */
    function countdown(id, timer){
        timer--;
        minRemain  = Math.floor(timer / 60);
        secsRemain = new String(timer - (minRemain * 60));
        // Pad the string with leading 0 if less than 2 chars long
        if (secsRemain.length < 2) {
            secsRemain = '0' + secsRemain;
        }

        // String format the remaining time
        clock      = minRemain + ":" + secsRemain;
        document.getElementById(id).innerHTML = clock;
        if ( timer > 0 ) {
            // Time still remains, call this function again in 1 sec
            setTimeout("countdown('" + id + "'," + timer + ")", 1000);
        } else {
            // Time is out! Hide the countdown
            document.getElementById(id).style.display = 'none';
        }

    }
</script>

countdown()此外，如果您在循环之外定义一次而不是在每一行中定义一次，那会更好

于 2013-04-02T11:18:18.023 回答