Java 脚本倒计时时钟不会显示

Java Script Countdown Clock Won't Display

我正在尝试构建一个从 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>

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

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

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

的日期对象之间的差异
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 并打开 "console" 选项卡。

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

另一个更新:

另一个错误是 <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>