Question

我正在尝试构建一个倒计时器，该计时器从10天24小时60分60秒开始，然后从html侧的文本框添加文本，然后将其添加到显示时间。有什么东西在喋喋不休，它不会显示出来。

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

非常感谢任何帮助。

Answer 1

正如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并打开“控制台”标签。

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

另一次更新：

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

Javascript倒计时时钟不会＃39; t显示

1 个答案: