我在 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);
}
最佳答案
这里有几件事......
首先setTimeout只会触发一次，你应该使用setInterval
第二， 您不希望多个元素具有相同的 id，也许可以使用类来代替
关于javascript - 我的计时器不会更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33619264/