javascript - 如何通过倒计时器填充表格单元格

Question

很抱歉我的新手问题。我需要通过倒计时器填充表格单元格。
我写了代码，但它不起作用。请帮我解决这个问题。

<script>
function counter(from, date, id) {
    var countDownDate = new Date(date).getTime();
    // Update the count down every 1 second
    var x = setInterval(function() {
        // Get todays date and time
        var now = new Date().getTime();
        // Find the distance between now an the count down date
        var distance = countDownDate - now;
        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        // Output the result in an element with id="demo"
        document.getElementById(id).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
        // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);
            document.getElementById(id).innerHTML = "EXPIRED";
        }
    }, 1000);
}
</script>

<?php
require 'connect.php';
$sql_market = "SELECT * FROM g_market";
$result_sql_market = mysql_query($sql_market);
while ($row = mysql_fetch_object($result_sql_market)) {
    $id = $row->id;
    $craft_1_points = $row->craft_1_points;
    $craft_2_points = $row->craft_2_points;
    $life_time = $row->life_time;
    echo "<table class = tableaction border='1'>";
        echo "<tr><td>" . $quest . "</td>
            <td><p align='center'>" . $craft_1_points . "</p></td>
            <td><p align='center'>" . $craft_2_points . "</p></td>
            <td><p id =\"". $id ."\" align=\"center\" onload=counter(\"" . $life_time ."\", \"".$id."\")></p></td>";
        echo "</tr>";
    echo "</table>";
}
?>

在控制台中，我看到 "onload=counter(..)" 已正确填充。但我在单元格中没有看到计时器。

Answer 1

删除 JavaScript 函数的第一个参数。

function counter(date, id) {
    var countDownDate = new Date(date).getTime();
    // Update the count down every 1 second
    var x = setInterval(function() {
        // Get todays date and time
        var now = new Date().getTime();
        // Find the distance between now an the count down date
        var distance = countDownDate - now;
        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        // Output the result in an element with id="demo"
        document.getElementById(id).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
        // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);
            document.getElementById(id).innerHTML = "EXPIRED";
        }
    }, 1000);
}