使用JavaScript的倒数计时器不适用于smarty

Hi guys i use Smarty() and JavaScript to make a table with countdown timer its seems everything is OK but i don't know why i just have one row result for my countdown timer if possible check out my codes and tell me what can i do thank you for all programmers. have nice day.

嗨伙计们,我使用Smarty()和JavaScript制作一个倒数计时器的表,似乎一切都好,但我不知道为什么我只有一行结果我的倒数计时器,如果有可能检查我的代码,告诉我我能做什么感谢所有程序员。祝你有美好的一天

HTML:

<table class="table table-striped table-hover" id="datatable3" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Avatar</th>
            <th>Player Name</th>
            <th>Game</th>
            <th>SS Shots</th>
            <th>BanTime Remaining</th>
            <th>Ban Reason</th>
        </tr>
    </thead>
    <tbody class="tb1">
    {foreach $bans as $ban}
        <tr class="tr1">
            <td class="count"></td>
            <td>{$ban.avatar}</td>
            <td>{$ban.name}</td>
            <td>{$ban.game}</td>
            <td>{$ban.ss}</td>
            <td>{include file="time.tpl"}</td>
            <td>{$ban.reason}</td>
        </tr>
    {/foreach}
    </tbody>
</table>

time.tpl :

<script type="text/javascript" language="javascript">
var now = new Date();
var event = new Date("{$ban.bantime}"*1000);
var milleseconds = (event - now) / 10;
var seconds = milleseconds / 100;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
var month = days / 30;
var years = days / 365.25;
ID=window.setTimeout("update();", 1);

function update() {
now = new Date();
seconds = (event - now) / 1000;
seconds = Math.floor(seconds);
minutes = seconds / 60;
minutes = Math.floor(minutes);
hours = minutes / 60;
hours = Math.floor(hours);
days = hours / 24;
days = Math.floor(days);
month = month / 30;
month = Math.floor(month);
years = days / 365.25;
years = Math.floor(years);

seconds = seconds - minutes*60;
if (seconds < 10) { seconds = "0" + seconds.toString(); }
minutes = minutes - hours*60;
if (minutes < 10) { minutes = "0" + minutes.toString(); }
hours = hours - days*24;
days = days - Math.floor(years*365.25);

document.getElementById("years").innerHTML = years;
document.getElementById("month").innerHTML = month;
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
ID=window.setTimeout("update();",500);
}
</script>
<table cellspacing="0" cellpadding="0" border="0" >
<tbody class="{$ban.userID}">
    <tr>
        <td><span id="years"></span></td>
        <td><span id="month"></span></td> 
        <td><span id="days"></span></td> 
        <td><span id="hours"></span></td>
        <td><span id="minutes"></span></td>
        <td><span id="seconds"></span></td>
    </tr>
    <tr>
        <td><span>years</span></td>
        <td><span>month</span></td> 
        <td><span>days</span></td> 
        <td><span>hours</span></td>
        <td><span>min</span></td>
        <td><span>sec</span></td>
    </tr>
</tbody>
</table>

But I have just one row result for my code, why? See this screenshot.

但是我的代码只有一行结果,为什么?看这个截图。

2 个解决方案

#1

Your problem is that setTimeout takes a function pointer as an argument, not a string with the function name.

您的问题是setTimeout将函数指针作为参数,而不是具有函数名称的字符串。

Thus, try this: ID = setTimeout(update, 500);

因此,试试这个:ID = setTimeout(update,500);

For more information, check out the docs. They also have an example.

有关更多信息,请查看文档。他们也有一个例子。

#2

document.getElementById("years") returns an element whose id is years

document.getElementById(“years”)返回id为years的元素

And in your case I can see only one element whose id is years.

在你的情况下,我只能看到一个id为年的元素。

If you want to change a group of elements, you might want give them a class name and then perform your operation on all the elements.

如果要更改一组元素,可能需要为它们指定一个类名,然后对所有元素执行操作。

For example:

// If you keep *multiple rows* something like this (not sure about your table structure)
<tbody class="{$ban.userID}">
    <tr>
        <td><span class="years"></span></td>
        ...
    </tr>
    <tr>
        <td><span>years</span></td>
        ...
    </tr>

    <tr>
        <td><span class="years"></span></td>
        ...
    </tr>
    <tr>
        <td><span>years</span></td>
        ...
    </tr>

</tbody>
</table>


/** This would do the trick **/
document.getElementsByClassName("years").innerHTML = years;
// ...

#1