当我重复使用php从mysql检索的数据时，Javascript只对第一条记录起作用？

我有个小问题让我发疯 问题是，我正在从mysql数据库检索记录 显示这些记录时，每个记录下都应该有一个倒计时javascript时钟，它从mysql获取值 它仅适用于第一条记录，其他记录仅为文本，以下是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>

//使用elements标签中的总秒数初始化时钟倒计时
secs=parseInt（document.getElementById（'countdowno'）.innerHTML，10）；
设置超时（“倒计时（'countdowno'，“+secs+”），1000）；
/**
*倒计时函数
*时钟倒计时到0:00，然后隐藏保持时钟的元素
*@param id时钟占位符的元素id
*@param timer显示时钟的总秒数
*/
功能倒计时（id、计时器）{
计时器--；
最小剩余=数学楼层（计时器/60）；
secsRemain=新字符串（计时器-（minRemain*60））；
//如果长度小于2个字符，则用前导0填充字符串
如果（secsRemain.length<2）{
secsRemain='0'+secsRemain；
}
//剩余时间的字符串格式
时钟=最小保持+”：“+secsRemain；
document.getElementById（id）.innerHTML=clock；
如果（计时器>0）{
//还有时间，请在1秒后再次调用此函数
设置超时（“倒计时”（“+id+”，“+timer+”），1000）；
}否则{
//时间到了！把倒计时藏起来
document.getElementById（id）.style.display='none'；
}
}

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

---

谢谢

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

<span id="countdown">

您可以添加类：

<span class="countdown">

---

问题在于您对多个跨度使用id

倒计时，但每个人都必须有另一个唯一的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>


虽然它不能直接工作，但您启发了我，我所做的是在php代码之后添加java脚本，并在我的sql while循环中重复

secs=parseInt（document.getElementById（'countdownn_'）.innerHTML，10）；setTimeout（“倒计时（'countdownn_'，“+secs+”），1000）非常感谢