Question

我尝试使用for循环显示我的倒计时，但我不知道我在哪里弄错了。有没有一种简单的方法可以使用香草javascript显示每一行的倒计时？

我的下表：

<html>
<body> 
<table style="width:50%" id= "tab">
    <tr>
<th>Name</th>
<th>Exp</th>
<th>Count Down</th>
</tr>
    <tr>
     <td> A</td>
     <td class = 'exp1'> 09/08/2019</td>
     <td class = 'demo'> </td>   
    </tr>
    <tr>
     <td> B</td>
     <td class = 'exp1'> 09/08/2020</td>
     <td class = 'demo'> </td>   
    </tr>
</table>
</body>
</html>

以下是我的JavaScript代码：

<script>
var exp = document.getElementById('tab').getElementsByClassName('exp1');

var x = document.getElementById('tab').getElementsByClassName('demo');

var   now = new Date();
function test(){

for (i = 0; i<exp.length; i++){
var  e = new Date( exp[i].innerHTML);
var  timeDiff = e.getTime() - now.getTime();
var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours   = Math.floor(minutes / 60);
var days    = Math.floor(hours   / 24);
hours %=24;
minutes %=60;
seconds %=60;
var timer = setTimeout('test()', 1000);   
}

for (i=0; i<x.length; i++){
x[i].innerHTML = days  + " " +  hours + " " + minutes + " " + seconds;
}
}

</script>

Answer 1

首先，您应该给您的一个类属性而不是一个id，因为应该只有一个具有相同id的元素。

第二，您可以使用

获取所有元素

var elements = document.getElementsByClassName('demo')

第三，你可以做

var c;
for (c = 0; c < elements.length; c++) {
// calculate and change the value here
// for each elements[c]
}

有关更多说明，请参见：https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

编辑为评论的答案：

您可以使用

每秒调用一次该函数

window.setInterval(function(){
/// call your function here
}, 1000);

请参见What's the easiest way to call a function every 5 seconds in jQuery?

有关如何根据timediff计算时间的信息，请参见Check time difference in Javascript

要更改其中的值，请在for循环内添加以下内容

document.getElementsByClassName('demo')[c].innerHTML = newstring

此处已回答：Setting innerHTML: Why won't it update the DOM?

使用Vanilla Javascript在表格中显示倒数

1 个答案: