使用 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 在表格中显示倒计时的主要内容，如果未能解决你的问题，请参考以下文章
javascript 使用vanilla JavaScript爬上DOM树
javascript 使用Vanilla JavaScript Shopify GraphQL Storefront API
javascript 使用Vanilla JavaScript Shopify GraphQL Storefront API
使用 vanilla JavaScript 在客户端处理 Firebase ID 令牌