将“新日期”更改为输入值

2024-05-04 • 问答

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

我正在创建基本应用程序，以便获得JavaScript的使用经验，其中之一是倒计时计时器，该倒计时计时器涉及将日期/时间输入到其中的输入，其想法是从getTime-inputTime启动倒计时。 / p>

我尝试实现一个'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天开始倒计时，无论输入的日期如何。

在变更处理程序中，根据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")，只需使用引用即可。

将“新日期”更改为输入值

qingtouwohao2 回答：将“新日期”更改为输入值

大家都在问