Javascript обратный отсчет, используя для цикла - PullRequest
Новая
       2

Javascript обратный отсчет, используя для цикла

0 голосов
/ 11 октября 2018

Я пытался использовать цикл 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>

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Вы сделали большинство вещей правильно .. используя 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>
0 голосов
/ 11 октября 2018

В вашем коде нет первого звонка на test().Так что либо вы забыли написать это в вопросе, либо у вас его нет в коде.Кто-то должен вызвать test() в первый раз, прежде чем начнется этот вечный цикл с setTimeout.

Я добавил фрагмент кода, который вы можете запустить, он содержит вставленный вами HTML, а также JavaScript,Единственная разница в том, что я позвонил test() после вашего var now, чтобы начать.

Пара вещей:

  • Я переместил setTimeout из for loop, так как его размещение там будет означать, что вы будете вызывать его с каждой итерацией, а не с каждойвторой.Кроме того, вы не можете иметь переменную now в качестве глобального значения, ее нужно получать каждый раз, когда вы хотите вычислить разницу внутри функции.Если вы посмотрите на документы , вы увидите:

Создает экземпляр даты JavaScript, который представляет один момент времени.Объекты даты основаны на значении времени, которое является числом миллисекунд с 1 января 1970 года по Гринвичу.var date1 = новая дата ('17 декабря 1995 г. 03:24:00');// Солнце 17 декабря 1995 03:24:00 GMT ...

Это означает, что когда вы создаете дату, она представляет единственный момент времени , это как если быВы сделали снимок того времени и сохранили его в замороженном виде.

  • Вторая проблема связана с тем, как вы отображаете информацию.Если у вас есть переменные, которые вы изменяете в этой области видимости цикла , после выхода из этой итерации значения исчезают навсегда.Если вы отображаете только эту информацию ( дни, минуты, часы, дни ) после вашего 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...