Question

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

我的下表：

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

    <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>

Answer 1

在您的代码中，没有第一次调用test()。因此，要么您忘记在问题中编写它，要么在代码中没有它。在与test()的永远循环开始之前，有人需要第一次调用setTimeout。

我添加了一个可以运行的代码片段，其中包含您粘贴的HTML和JavaScript。唯一的不同是，我在您test()之后打电话给var now以使其开始。

几件事：

我将setTimeout从for loop中移出，因为将其放置在那意味着您将在每次迭代而不是每秒的迭代中调用它。同样，您不能将now变量用作全局值，而每次要在函数内部计算差异时都需要获取它。如果您查看docs，将会看到：

创建一个表示单个时刻的JavaScript Date实例。日期对象基于时间值，该时间值是自UTC 1970年1月1日以来的毫秒数。 var date1 = new Date（'1995年12月17日03:24:00'）; // 1995年12月17日星期日格林尼治标准时间...

这意味着在创建日期时，它表示单个时间，就好像您拍摄了该时间的快照并将其保存并冻结一样。

第二个问题与您如何显示信息有关。如果您有在 for循环范围内更改的变量，则一旦退出该迭代，这些值将永远消失。如果仅在for loop之后显示该信息（天，分钟，小时，天），则将最后一个值保存到这些变量中。并非您要找的东西。要解决此问题，您只需将x[i].innerHTML = days + " days " + hours + " hours " + minutes + " minutes " + seconds + " seconds";移至与计算值所在的循环相同的位置。
作为补充，您可以结帐setInterval()，因为这几乎就是您想要的。

var exp = document.getElementById('tab').getElementsByClassName('exp1');
var x = document.getElementById('tab').getElementsByClassName('demo');
test();

function test() {
  var now = new Date();
  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;
    x[i].innerHTML = days + " days " + hours + " hours " + minutes + " minutes " + seconds + " seconds";
  }

  var timer = setTimeout("test()", 1000);
}

<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>

Answer 2

您已正确完成了大多数操作。.使用setInterval和稍作修改即可完成这项工作

var exp = document.getElementById('tab').getElementsByClassName('exp1');

var x = document.getElementById('tab').getElementsByClassName('demo');


function test(){
  var   now = new Date();
  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;
    x[i].innerHTML =  days  + "d " +  hours + "h " + minutes + "m " + seconds +"s";
  //var timer = setTimeout('test()', 1000);   
  }

  //for (i=0; i<x.length; i++){
  //x[i].innerHTML = days  + " " +  hours + " " + minutes + " " + seconds;
  //}
}
setInterval(function(){ test();; }, 1000);

<html>
<body> 
<table style="width:100%" id= "tab">
<tr>
<th>Name</th>
<th>Exp</th>
<th>Count Down</th>
</tr>
    <tr>
     <td> A</td>
     <td class = 'exp1'> 10/13/2018</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>

使用for循环进行JavaScript倒计时

2 个答案: