主页 / 问题 / 825942
Accepted
humster_spb
Asked:2020-05-10 22:17:33 +0000 UTC2020-05-10 22:17:33 +0000 UTC

JS：如何测试倒计时脚本？

  • 772

我们需要最简单的脚本来倒计时到指定日期。我设法找到的所有现成的解决方案对我来说都太复杂了。我自己写了，但现在我不知道如何检查其工作的正确性。它似乎显示了我的期望：

function getMyDate() {

	var nowDate = Date.now(); //текущая дата в timestamp

	var myDate = Date.parse(new Date(2018, 4, 12, 22)); //нужная дата в timestamp

	var sec = Math.round((myDate - nowDate)/1000); //общее количество оставшихся секунд
  
  var days = parseInt(sec/86400); //количество дней
  
  var hours = parseInt(sec/3600)%24; //...часов
  
  var mins = parseInt(sec/60)%60; //...минут
  
  sec = sec%60; //...секунд
  
  document.getElementById('days').innerHTML = days;
  document.getElementById('hours').innerHTML = hours;
  document.getElementById('mins').innerHTML = mins;
  document.getElementById('sec').innerHTML = sec;

}


setInterval(function() { getMyDate(); }, 1000);
table {
  border-collapse: collapse;
}
td {
  padding: 5px;
  text-align: center;
  border: 1px solid black;
}
<h2>ОСТАЛОСЬ</h2>
<table>
<tr>
  <td>дней:</td><td>часов:</td><td>минут:</td><td>секунд:</td>
</tr>
<tr>
  <td id="days"></td><td id="hours"></td><td id="mins"></td><td id="sec"></td>
</tr>
</table>

javascript

2 个回答

  1. Best Answer

    不，这是不正确的，因为在到达日期之后 - 这是屏幕：

    在此处输入图像描述

    为避免这种情况，您需要像这样编辑脚本：

    function getMyDate() {

	var nowDate = Date.now(); //текущая дата в timestamp

	var myDate = Date.parse(new Date(2018, 4, 9, 17)); //нужная дата в timestamp

	var sec = Math.round((myDate - nowDate)/1000); //общее количество оставшихся секунд
  
  var days = parseInt(sec/86400); //количество дней
  
  var hours = parseInt(sec/3600)%24; //...часов
  
  var mins = parseInt(sec/60)%60; //...минут
  
  sec = sec%60; //...секунд
  // ниже проверяем не отрицательные ли данные.
  if( sec >= 0 && mins >= 0 && hours >= 0 && days >= 0) {
    document.getElementById('days').innerHTML = days;
    document.getElementById('hours').innerHTML = hours;
    document.getElementById('mins').innerHTML = mins;
    document.getElementById('sec').innerHTML = sec;
  } else {
    document.getElementById('days').innerHTML = 0;
    document.getElementById('hours').innerHTML = 0;
    document.getElementById('mins').innerHTML = 0;
    document.getElementById('sec').innerHTML = 0;
  }
}


setInterval(function() { getMyDate(); }, 1000);
    table {
  border-collapse: collapse;
}
td {
  padding: 5px;
  text-align: center;
  border: 1px solid black;
}
    <h2>ОСТАЛОСЬ</h2>
<table>
<tr>
  <td>дней:</td><td>часов:</td><td>минут:</td><td>секунд:</td>
</tr>
<tr>
  <td id="days"></td><td id="hours"></td><td id="mins"></td><td id="sec"></td>
</tr>
</table>

    • 1

  2. 要检查，您可以用假的替换当前日期/时间：

    {
  // Машина времени!
  let diff;
  let orig = Date.now.bind(Date);
  Date.now = () => orig() + 
    (diff ? diff : 0);
  
  document.getElementById('fakeDTBtn')
   .addEventListener('click', 
     () => {
       diff = new Date(document.getElementById('DTNow').value).getTime() - orig();
     })
}

// Ниже оригинальный код
function getMyDate() {

	var nowDate = Date.now(); //текущая дата в timestamp

	var myDate = Date.parse(new Date(2018, 4, 12, 22)); //нужная дата в timestamp

	var sec = Math.round((myDate - nowDate)/1000); //общее количество оставшихся секунд
  
  var days = parseInt(sec/86400); //количество дней
  
  var hours = parseInt(sec/3600)%24; //...часов
  
  var mins = parseInt(sec/60)%60; //...минут
  
  sec = sec%60; //...секунд
  
  document.getElementById('days').innerHTML = days;
  document.getElementById('hours').innerHTML = hours;
  document.getElementById('mins').innerHTML = mins;
  document.getElementById('sec').innerHTML = sec;

}


setInterval(function() { getMyDate(); }, 1000);
    table {
  border-collapse: collapse;
}
td {
  padding: 5px;
  text-align: center;
  border: 1px solid black;
}
    <h2>ОСТАЛОСЬ</h2>
<table>
<tr>
  <td>дней:</td><td>часов:</td><td>минут:</td><td>секунд:</td>
</tr>
<tr>
  <td id="days"></td><td id="hours"></td><td id="mins"></td><td id="sec"></td>
</tr>
</table>

<!-- -->
<div>
  <input type="datetime-local" id="DTNow">
  <button id="fakeDTBtn">Выставить сейчас</button>
</div>

    • 0

相关问题