JavaScript的倒数计时器无法在Smarty中使用

Question

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.

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 .

Answer 1

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

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

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

Answer 2

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

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

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;
// ...

`