使用for循环的Javascript倒计时

阿卜杜勒哈基姆•伊姆兰

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

拉吉·夏尔马

你已经做对了大部分事情......使用 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。