javascript - Javascript 倒计时时钟不会显示

Question

我正在尝试构建一个从 10 天 24 小时 60 分 60 秒开始的倒计时计时器，然后从 html 端的文本框中添加文本，然后将其添加到显示时间。有问题，不会显示。

function updateWCTime() {
  today = new Date();
  dueDate = today.getDate() + 10;

  diff = dueDate - today;

  days = Math.floor(diff / (1000 * 60 * 60 * 24));
  hours = Math.floor(diff / (1000 * 60 * 60));
  mins = Math.floor(diff / (1000 * 60));
  secs = Math.floor(diff / 1000);

  dd = days;
  hh = hours - days * 24;
  mm = mins - hours * 60;
  ss = secs - mins * 60;

  document.getElementById("countdown")
    .innerHTML =
    dd + ' days ' +
    hh + ' hours ' +
    mm + ' minutes ' +
    ss + ' seconds' +
    " " +
    document.getElementById("client").value;
}
setInterval('updateWCTime()', 1000);

body {
  background-color: #80d4ea;
}
#countdown {
  height: 100px;
  width: 800px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding-top: 70px;
  font-family: courier, monospace;
  text-align: center;
  color: white;
  font-size: 45px;
}

<div id='countdown'></div>
<div id='textbox'>
  Client:
  <input id='client' type='txt'></input>
  </br>
</div>
<div id='submit_button'>
  <button onclick="updateWCTime()">submit</button>
</div>

如有任何帮助，我们将不胜感激。

Answer 1

正如 Iván 所说，方法是 getDate() , 不是 GetDate() .案例很重要。

第二个错误是 - 每一秒你都在计算完全相同时间

的 Date 对象之间的差异

today = new Date();
dueDate = new Date(today); // those two are exactly the same

您应该明确定义 dueDate使您的代码工作。

例如，

dueDate = new Date(2015,1,24,0,0,0,0);

请注意，您的浏览器可以很好地向您显示您的 javascript 代码有什么问题，请按 Ctrl+Shift+I 并打开“控制台”选项卡。

另一个建议是使用为您提供倒计时代码的网站。您的代码有很多问题(全局变量，每次都创建一个日期对象等)

另一个更新:

另一个错误是<input type="txt"这会打破document.getElementById("client").value

这是您的代码:

由 setInterval 的性质引起的抖动

var dueDate = (new Date()).getTime() + 10*1000;
var interval;

function updateWCTime() {
  var today = new Date();

  var diff = dueDate - today.getTime();
  if (diff < 0) {
    // clearInterval(interval);
    document.getElementById("countdown").innerHTML = document.getElementById("client").value;
    return;
  }

  var days = Math.floor(diff / (1000 * 60 * 60 * 24));
  var hours = Math.floor(diff / (1000 * 60 * 60));
  var mins = Math.floor(diff / (1000 * 60));
  var secs = Math.floor(diff / 1000);

  var dd = days;
  var hh = hours - days * 24;
  var mm = mins - hours * 60;
  var ss = secs - mins * 60;

  document.getElementById("countdown")
    .innerHTML =
    dd + ' days ' +
    hh + ' hours ' +
    mm + ' minutes ' +
    ss + ' seconds' +
    " " +
    document.getElementById("client").value;
}
interval = setInterval(updateWCTime, 1000);

body {
  background-color: #80d4ea;
}
#countdown {
  height: 100px;
  width: 800px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding-top: 70px;
  font-family: courier, monospace;
  text-align: center;
  color: white;
  font-size: 45px;
}

<div id='countdown'></div>
<div id='textbox'>
  Client:
  <input id='client' type='text'></input>
  </br>
</div>
<div id='submit_button'>
  <button onclick="updateWCTime()">submit</button>
</div>