将 'new Date' 更改为输入值

Question

我是编码新手，所以请放轻松..

我正在创建基础应用程序，因此我可以获得一些使用 JavaScript 的经验，其中之一是一个倒数计时器，涉及一个输入 date/time 并且我的想法是启动getTime 的倒计时 - inputTime.

我已经尝试实现 'change' 事件侦听器来更改文本内容。

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 天开始倒计时，无论日期输入如何更改。

Answer 1

在您的更改处理程序中，将 deadline 设置为基于 timeInput 值的新 DateTime 对象的 getTime() 值：

（例如将 2019-12-31 18:00:00 粘贴到输入中并从中移除焦点，倒计时应从 57 天开始）

var timeInput = document.getElementById("timeInput");
var timeCounter = document.getElementById("timeCounter");
var deadline = new Date('dec 31, ' + (new Date().getFullYear()) + ' 23:59:59').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")，只需使用引用即可。

将 'new Date' 更改为输入值

Changing 'new Date' to input value

javascript

date

timer

countdown