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

Java Script Countdown Clock Won't Display

本文关键字：显示 时钟 脚本 倒计时 Java      更新时间：2023-09-26

我正在尝试构建一个倒数计时器，该计时器从 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>

任何帮助将不胜感激。

正如伊万·门托因所说，该方法是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>

相关文章：