Question

很抱歉，如果该主题属于“讨厌的人”类别中。我最近尝试学习JS，并且尝试制作一个简单的时钟来工作。我不会说太多，但问题是我无法更新小时，分钟和秒的值。我将.innerHTLM与setInterval一起使用，但是它不起作用。在Chrome浏览器的检查器中，似乎尝试更改数据，但是没有...有什么想法吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/style-clock.css">
    <title>Clock</title>
</head>
<body>
    <div class="container">
        <div class="clock">
            <span id="hours"></span>
            <span id="mins"></span>
            <span id="secs"></span>
        </div>
    </div>
<script src='../js/app-clock.js'></script>    
</body>
</html>

JS：

const time = new Date();

function currentTime(){
    var hour = time.getHours();
    var minute = time.getMinutes();
    var second = time.getSeconds();
    document.getElementById("hours").innerHTML = hour;
    document.getElementById("mins").innerHTML = minute;
    document.getElementById("secs").innerHTML = second;
}
setInterval(currentTime,500);

Answer 1

你很近。由于您在间隔函数之外定义了time，因此只分配了一次。只需将time移到currentTime（）函数中，如下所示：

function currentTime() {
  const time = new Date();
  var hour = time.getHours();
  var minute = time.getMinutes();
  var second = time.getSeconds();
  document.getElementById("hours").innerHTML = hour;
  document.getElementById("mins").innerHTML = minute;
  document.getElementById("secs").innerHTML = second;
}
setInterval(currentTime, 500);

<div class="container">
  <div class="clock">
    <span id="hours"></span>
    <span id="mins"></span>
    <span id="secs"></span>
  </div>
</div>

Answer 2

您在称为间隔的函数之外减速。

CodePen Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/style-clock.css">
    <title>Clock</title>
</head>
<body>
    <div class="container">
        <div class="clock">
            <span id="hours"></span>
            <span id="mins"></span>
            <span id="secs"></span>
        </div>
    </div>
<script src='../js/app-clock.js'></script>    
</body>
</html>

JS

setInterval(function(){
  const time = new Date();
  var hour = time.getHours();
  var minute = time.getMinutes();
  var second = time.getSeconds();
  document.getElementById("hours").innerHTML = hour;
  document.getElementById("mins").innerHTML = minute;
  document.getElementById("secs").innerHTML = second;
}, 500);

Answer 3

问题似乎是常量time的位置。

问题是，Date()的输出将在脚本开头设置为const time，而currentTime()函数将不断更新相同的值。因此，在您的情况下，这些值实际上正在更新，但是由于它们是相同的值，因此您无法有所作为。

解决方案：为了使其正常工作，每次需要更新innerHTML的值时，都需要更新const time的值。您只需要进行以下更改：

JS：

function currentTime(){
const time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
document.getElementById("hours").innerHTML = hour;
document.getElementById("mins").innerHTML = minute;
document.getElementById("secs").innerHTML = second;
}
setInterval(currentTime,500);

Answer 4

将“ new Date（）”行移至该函数中，以将每个间隔的时间设置为当前时间。

function currentTime(){
  const time = new Date();
  var h = time.getHours();
  var m = time.getMinutes();
  var s = time.getSeconds();
  document.getElementById("hours").innerHTML = h;
  document.getElementById("mins").innerHTML  = m;
  document.getElementById("secs").innerHTML  = s;
}
setInterval(currentTime,500);

我的时钟不工作。为什么InnerHTML不更新？

4 个答案: