2

Нужен был максимально простой скрипт обратного отсчёта времени до указанной даты. Все готовые решения, которые удалось найти, показались мне слишком сложными. Написал свой, но теперь не знаю, как проверить корректность его работы. Вроде бы показывает то, что я ожидаю:

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>

0

2 ответа 2

1

Нет не корректно, так как после достижения даты он идет в - вот скрин:

введите сюда описание изображения

Что бы избежать данного случая нужно редактировать скрипт так:

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>

2
  • О, точно! Спасибо. Про уход в минус я как-то даже не подумал. А больше никаких косяков нет? Логика в принципе верная? 10 мая 2018 в 14:39
  • Да, логика верная, просто в - уходил , а так порядок.
    – Zicrael
    10 мая 2018 в 14:40
0

Для проверки можно подменять текущую дату/время на фейковые:

{
  // Машина времени!
  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>

3
  • Не, фейковые даты мне ни к чему - я ведь сам вручную их задаю, а не получаю от пользователя. Мне было важно понять, корректно ли считаются дни, часы, минуты - не напутал ли я чего с логикой. 10 мая 2018 в 14:45
  • Я дал вам способ сказать скрипту что сейчас уже завтра/послезавтра. Вы спросили: "Как проверить?", я ответил: "вот - посмотрите, как ваш таймер будет выглядеть в будущем"
    – vp_arth
    10 мая 2018 в 14:50
  • да, ок, спасибо! 10 мая 2018 в 14:52

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.