Javascript 我的钟赢了；不行。为什么不是'；不更新HTML吗？_Javascript_Html_Css

Javascript 我的钟赢了；不行。为什么不是'；不更新HTML吗？

javascript html css

Javascript 我的钟赢了；不行。为什么不是'；不更新HTML吗？,javascript,html,css,Javascript,Html,Css,抱歉，如果此主题属于“烦人主题”类别。我最近试着学习JS，我正试着制作一个简单的时钟来工作。我想说的不是太花哨，但问题是我无法更新小时、分钟和秒的值。我使用了带有setInterval的.innerHTLM，但它不起作用。在Chrome的inspector中，它似乎试图更改数据，但没有。。。有什么想法吗，伙计们 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

抱歉，如果此主题属于“烦人主题”类别。我最近试着学习JS，我正试着制作一个简单的时钟来工作。我想说的不是太花哨，但问题是我无法更新小时、分钟和秒的值。我使用了带有setInterval的.innerHTLM，但它不起作用。在Chrome的inspector中，它似乎试图更改数据，但没有。。。有什么想法吗，伙计们

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

你很接近。由于您在interval函数之外定义了

时间

，因此它只被赋值一次。只需将

time

移动到currentTime（）函数中，如下所示：

函数currentTime（）{
常数时间=新日期（）；
var hour=time.getHours（）；
var minute=time.getMinutes（）；
var second=time.getSeconds（）；
document.getElementById（“小时”）.innerHTML=hour；
document.getElementById（“mins”）.innerHTML=minute；
document.getElementById（“secs”）.innerHTML=second；
}
设置间隔（currentTime，500）
您在称为间隔的函数之外减速

HTML
问题似乎在于常量时间的定位
问题是，Date（）
的输出将在脚本开始时设置为consttime
，并且currentTime（）
函数将一次又一次地更新相同的值。因此，在您的例子中，这些值实际上正在更新，但是因为它们是相同的值，所以您无法做出区别
解决方案：要使其正常工作，每次需要更新innerHTML的值时，都需要更新consttime
的值。您只需执行以下更改：
JS:
将“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);

您永远不会更新实际时间。time
中的值不是“live”，请将const行也放在函数中。谢谢！其实很简单哦是的。。。对不起，这真是太蠢了。。。非常感谢，先生。
<!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>

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

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

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