Javascript 我的计时器赢了'；t更新_Javascript_Jquery_Html_Css

Javascript 我的计时器赢了'；t更新

javascript jquery html css

Javascript 我的计时器赢了'；t更新,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我用HTML创建了一个空表；此外，我还添加了一个按钮，允许用户根据需要创建尽可能多的空行。但是，对于每一个新条目，我添加了一个分钟计数器，它从零开始。我的问题是，虽然它显示计数器，但它没有更新。如果我添加了一个新条目，它将保持在0并且从不更新。我尝试查看setInterval和setTimeout函数，但无法使其正常工作。有人能帮我找出我做错了什么吗？非常感谢 HTML <!DOCTYPE html> <html> <link rel="stylesheet

我用HTML创建了一个空表；此外，我还添加了一个按钮，允许用户根据需要创建尽可能多的空行。但是，对于每一个新条目，我添加了一个分钟计数器，它从零开始。我的问题是，虽然它显示计数器，但它没有更新。如果我添加了一个新条目，它将保持在0并且从不更新。我尝试查看setInterval和setTimeout函数，但无法使其正常工作。有人能帮我找出我做错了什么吗？非常感谢

HTML

<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>   
    <body>      
        <h1>Hello World</h1>
        <table id="myTable" class="editableTable">
            <caption><center>Hello World</center></caption>
            <thead> 
                <tr> 
                    <th>ID</th> 
                    <th>User</th> 
                    <th>Time</th> 
                    <th>Score</th> 
                </tr> 
            </thead> 
            <tbody id="tablebody"> 
                <tr style="display:none" id="templaterow"> 
                    <td></td> 
                    <td></td> 
                    <td id="timer"></td> 
                    <td></td>               
                </tr>           
            </tbody>            
        </table>
        <div class="tablebuttons"> <button onclick="myCreateFunction()">Add</button></div>      
    </body>
</html>

Javascript

export function updateTime(seconds: number, minutes: number) {           
            $("#timer").last().html('{0}:{1}'.format(minutes, seconds));
            seconds += 1;
            if (seconds >= 60) {
                seconds = 0;
                minutes += 1;
            }
            if (minutes >= 60) {
                minutes = 0;
            }
            setTimeout(updateTime, 1000, seconds, minutes);
        };

        $(document).ready(function () {            
            setTimeout(updateTime, 1000, 0,0);
        });

        export function myCreateFunction(): void {
            var newInstance = <HTMLTableElement>document.getElementById("templaterow").cloneNode(true);
            newInstance.style.display = "";
            newInstance.id = null;
            document.getElementById("tablebody").appendChild(newInstance);
        }

导出函数更新时间（秒数，分钟数）{
$（“#timer”）.last（）.html（'{0}:{1}'。格式（分钟，秒））；
秒+=1；
如果（秒>=60）{
秒=0；
分钟+=1；
}
如果（分钟>=60）{
分钟=0；
}
setTimeout（更新时间，1000秒，分钟）；
};
$（文档）.ready（函数（）{
setTimeout（updateTime，1000,0,0）；
});
导出函数myCreateFunction（）：void{
var newInstance=document.getElementById（“templaterow”）.cloneNode（true）；
newInstance.style.display=“”；
newInstance.id=null；
document.getElementById（“tablebody”）.appendChild（newInstance）；
}

这里有两件事

首先，setTimeout只会触发一次，您应该使用setInterval

第二,，您不希望有多个具有相同id的项，也许可以使用类来代替这里的耦合项。

首先，setTimeout只会触发一次，您应该使用setInterval

第二,，

您不希望有多个具有相同id的项，或者改用class

可能是因为您多次使用了

id

属性吗<代码>id属性在一个页面上只能使用一次，而

类

属性是为多个实例设计的。这可能是因为您多次使用了

id

属性吗

id

属性在一个页面上只能使用一次，而

class

属性是为多个实例设计的。我在这方面比较新。你能详细介绍一下类的用法吗？举个例子吧？嗯。。。通常，class属性的一个作用是设置css类的格式，但是jquery可以让您轻松地选择具有特定类的所有元素。。。例如，您使用的$（“.className”）表示ID，您应该只有一个具有特定ID的元素，但是您可以有多个具有相同类的元素，并选择适当的元素。这可能有助于。。。我对这方面还不太熟悉。你能详细介绍一下类的用法吗？举个例子吧？嗯。。。通常，class属性的一个作用是设置css类的格式，但是jquery可以让您轻松地选择具有特定类的所有元素。。。例如，您使用的$（“.className”）表示ID，您应该只有一个具有特定ID的元素，但是您可以有多个具有相同类的元素，并选择适当的元素。这可能有助于。。。

export function updateTime(seconds: number, minutes: number) {           
            $("#timer").last().html('{0}:{1}'.format(minutes, seconds));
            seconds += 1;
            if (seconds >= 60) {
                seconds = 0;
                minutes += 1;
            }
            if (minutes >= 60) {
                minutes = 0;
            }
            setTimeout(updateTime, 1000, seconds, minutes);
        };

        $(document).ready(function () {            
            setTimeout(updateTime, 1000, 0,0);
        });

        export function myCreateFunction(): void {
            var newInstance = <HTMLTableElement>document.getElementById("templaterow").cloneNode(true);
            newInstance.style.display = "";
            newInstance.id = null;
            document.getElementById("tablebody").appendChild(newInstance);
        }