Javascript倒计时不为php循环工作

Javascript countdown not working for php loop

本文关键字：循环 工作 php 倒计时 Javascript      更新时间：2023-09-26

你好，我和一个朋友有一个黑帮游戏。我有一个倒计时计时器代码，但它只工作，当我使用一个计时器。但是我需要在循环中使用它来在表中获得更多的计时器。我在谷歌上搜索了一下，但没有任何帮助。我看到我必须使用不同的id，但这对我不起作用。我对javascript知之甚少。

这是我的代码:

While循环

: 

while($info = mysql_fetch_object($dbres))
{
$j = 0;
$bieding = mysql_fetch_object(mysql_query("SELECT `bedrag` FROM `biedingen` WHERE `veilingid`='{$info->id}' ORDER BY `bedrag` DESC LIMIT 1"));
$tijd = ($info->tijd + $info->duur * 60 * 60 - $time);
echo '<tr>
<td>'.veilingnaam($info->id,1,1).'</td>
<td>'.usernaam($info->veiler,1,1).'</td>
<td>&euro;'.getal($bieding->bedrag).'</td>
<td><div id="teller'.$j.'"></div></td>
</tr>';
}
Javascript部分:

<script type="text/javascript">
var seconds = <?= ($tijd+1) ?>;
var countdown = document.all? document.all["teller<?= $j?>"] : document.getElementById?         document.getElementById("teller<?= $j?>") : "";
var woord = "seconden";
function display()
{
seconds=seconds-1;
if(seconds==1){ woord="seconde"; }
if(seconds==0){ woord="seconden"; }
if(seconds<0)
{
    self.location.replace(self.location);
}
else
{
    if (countdown)
    {
        countdown.innerHTML=seconds+" "+woord;
        setTimeout('display()',1000);
    }
}
}
display();
</script>

while循环遍历DB中的表行，但JavaScript代码不是该循环的一部分。这意味着您为每一行生成一个HTML表，但随后您创建<script>...</script>，其中仅为最后一行包含$tijd/$j(假设您的while在脚本添加到页面之前执行)。

可能的解决方法:

  • 添加一个jQuery的选择器，比如$("div.teller").each(function(){...});，并在该函数中创建一个计时器和/或任何其他与div相关的JavaScript代码。
    注意，这需要你的div获得一个CSS类"teller"。
  • 在PHP的while循环中创建每个DB的表行所需的所有JavaScript代码，但这可能会变得非常混乱。

另外，我建议你看看JavaScript的setInterval()，因为它比setTimeout()更适合你想做的事情。

另一件要考虑的事情是:你所有的计时器都有一个1秒的刻度。在我看来，它是更好的有一个单一的计时器，只是保持秒数(无论可能是)在一个JavaScript数组(这是很容易在PHP的while循环创建)。

编辑:这里有一种方法:

$data = array();
while($info = mysql_fetch_object($dbres))
{
    ... /* your current code */
    $data[] = "{ id: 'teller$j', seconds: $tijd }";
}
$data = "[ ".implode(", ", $data)." ]";
现在，在循环的之外创建JavaScript代码: 
<script type="text/javascript">
var data = <?php echo $data; ?>; // It is not advisable to use <?= ... ?>
// Get references to divs via saved ids (seconds are already saved
for (i = 0; i < data.length; i++)
    data.div = document.getElementById(data.id); // No need for document.all; IE supports getElementById since version 5.5
...
</script>

现在，调整display()以使用data数组的元素。

相关文章：