Question

我在HTML中创建了一个空表;另外，我添加了一个按钮，允许用户根据需要创建尽可能多的空行。但是，对于每个新条目，我添加了一个分钟计数器，并且每个新条目从零开始。我的问题是，虽然它显示了计数器，但它没有更新。如果我添加一个新条目，它将保持为0并且永远不会更新。我试着查看setIntervals和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>

CSS

html, body{
    top:0;
    bottom:0;
    left:0;
    right:0;
}

h1 {
    text-align: center;
}

button {
    text-align: center;
    word-wrap: break-word;
    font-weight: bold;
}

.buttons{
    margin-left: auto;
    margin-right: auto;
    width: 600px;
}

* { 
    font-family:Consolas 
} 

.editableTable { 
    border:solid 1px; 
    width:100%; 
} 

.editableTable td { 
    border:solid 1px; 
} 

.editableTable .cellEditing { 
    padding: 0; 
} 
.editableTable .cellEditing input[type=text]{ 
    width:100%; 
    border:0; 
    background-color:rgb(255,253,210); 
}

的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);
        }

Answer 1

在这里结合......

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

其次，您不希望拥有多个具有相同ID的项目，可能会使用类

我的计时器不会更新

1 个答案: