Изменение «новой даты» на входное значение - PullRequest
Новая
       11

Изменение «новой даты» на входное значение

2 голосов
/ 04 ноября 2019

Я новичок в кодировании, поэтому, пожалуйста, будьте осторожны со мной ..

Я создаю базовые приложения, чтобы я мог получить некоторый опыт работы с JavaScript, одним из них является таймер обратного отсчета, включающий ввод, который вывведите дату / время, и идея состоит в том, чтобы начать обратный отсчет из getTime - inputTime.

Я попытался реализовать прослушиватель события 'change' для изменения textContent. 

var timeInput = document.getElementById("timeInput");
var timeCounter = document.getElementById("timeCounter");
var deadline = new Date('dec 31, 2020 15:37:25').getTime();
// var deadline = document.getElementsById("timeInput").getTime();

var x = setInterval(function() {
  var now = new Date().getTime();
  var t = deadline - now;
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((t % (1000 * 60)) / 1000);

  document.getElementById("timeCounter").innerHTML = days + "d " +
    hours + "h " + minutes + "m " + seconds + "s ";
  if (t < 0) {
    clearInterval(x);
    document.getElementById("timeCounter").innerHTML = "EXPIRED" + " Enter a new date.";
  }
}, 1000);

timeInput.addEventListener("change", function() {
  timeCounter.textContent = t.textContent;
})

Страница ведет обратный отсчет с 428 дней независимо от изменения введенной даты.

1 Ответ

1 голос
/ 04 ноября 2019

В вашем обработчике изменений установите deadline на значение getTime() нового объекта DateTime на основе значения timeInput:

(например, вставьте 2019-12-31 18:00:00 во вход и удалитефокус с него, и обратный отсчет должен начинаться через 57 дней) 

var timeInput = document.getElementById("timeInput");
var timeCounter = document.getElementById("timeCounter");
var deadline = new Date('dec 31, 2020 15:37:25').getTime();
// var deadline = document.getElementsById("timeInput").getTime();

var x = setInterval(function() {

  var now = new Date().getTime();
  var t = deadline - now;
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((t % (1000 * 60)) / 1000);
  timeCounter.innerHTML = days + "d " +
    hours + "h " + minutes + "m " + seconds + "s ";
  if (t < 0) {
    clearInterval(x);
    timeCounter.innerHTML = "EXPIRED" + "Enter a new date.";
  }
}, 1000);

timeInput.addEventListener("change", function() {
  deadline = new Date(timeInput.value).getTime();
})
<input type="text" id="timeInput" />
<div id="timeCounter"></div>

Проблема с вашим кодом заключалась в том, что deadline никогда не обновлялся, а также переменная t является локальной переменной, доступной только в функции обратного вызоваВы перешли на setInterval.

. Далее вы можете провести некоторую оптимизацию. Поскольку у вас уже есть ссылка timeCounter, вам не нужно использовать document.getElementById("timeCounter") om функцию обратного вызова, просто используйте ссылку вместо

.
...