使用 Vanilla Javascript 在表格中显示倒计时

Posted

技术标签:

【中文标题】使用 Vanilla Javascript 在表格中显示倒计时【英文标题】：Displaying countdown in a table using Vanilla Javascript 【发布时间】：2019-03-13 05:53:19 【问题描述】：

我曾尝试使用 for 循环来显示我的倒计时，但我不知道我哪里弄错了。有没有更简单的方法来使用 vanilla 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>

【问题讨论】：

How do I loop through children objects in javascript?的可能重复 【参考方案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 在表格中显示倒计时的主要内容，如果未能解决你的问题，请参考以下文章