Question

我正在制作一个非常简单的页面，该页面仅计算用户打开选项卡的秒数。在控制台中，秒更新，但在浏览器中的页面上却没有。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Counter</title>
    <script type="text/javascript">
      window.seconds = document.getElementById('counts');
      var count = setInterval('counter()', 1000);

      function counter(){
        console.log(seconds)
        document.getElementById('counts').innerHTML = window.seconds + 1;
      }

    </script>
    <style>
      h2 {
        text-align:center;
        color:#032441;
        font-family:monospace;
      }
      div {
        text-align:center;
        color:#032441;
        font-size:70px;
        font-family:monospace;
      }
    </style>
  </head>

  <body>
    <script>
      document.body.style.backgroundColor = "#EBE9BD"
    </script>

    <h2>
      You have been on this page for
    </h2>
    <div id="counts">
      0
    </div>
    <h2>
      seconds.
    </h2>

  </body>
 </html>

出什么问题了？

Answer 1

变量seconds在元素渲染之前就被声明得太早了，这就是为什么我在代码中添加了window.onload包装器。
您需要使用innerHTML来更改div元素的内容。
没有关系，但是您也可以通过CSS规则设置body标签的样式。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Counter</title>
    <script type="text/javascript">
      window.onload = function () {
        var seconds = document.getElementById('counts');
        var count = setInterval(counter, 1000);

        function counter(){
          var newCount = Number(seconds.innerHTML) + 1
          console.log(newCount);
          seconds.innerHTML = newCount;
        }
      }
    </script>
    <style>
      body {
        backgroundColor: "#EBE9BD";
      }
      h2 {
        text-align: center;
        color: #032441;
        font-family: monospace;
      }
      div {
        text-align: center;
        color: #032441;
        font-size: 70px;
        font-family: monospace;
      }
    </style>
  </head>

  <body>
    <h2>
      You have been on this page for
    </h2>
    <div id="counts">
      0
    </div>
    <h2>
      seconds.
    </h2>
  </body>
</html>

Answer 2

要访问某个元素的“主体”，您必须通过element.innerHTML访问它，在您的情况下，它看起来像是window.seconds.innerHTML = window.seconds.innerHTML + 1

编辑：但这不能解决您的问题。

您的脚本未检测到<div id="counts">元素，因为它尚未加载，您可以通过在div之后移动脚本来解决此问题
由于innerHTML返回一个字符串，因此执行+将同时附加两个字符串，您的秒数将类似于 011111111 ，因此您必须将其解析为通过parseInt(window.seconds.innerHTML)

所以改变 window.seconds = window.seconds + 1 至 window.seconds.innerHTML = parseInt(window.seconds.innerHTML) + 1;

然后将脚本标签移到最底部，这应该很有趣

Answer 3

您可以使用以下内容：

<script type="text/javascript">
    window.seconds = document.getElementById('counts');
    setInterval('counter()', 1000);

    function counter(){
        console.log(seconds.innerHTML);
        window.seconds.innerHTML++;
    }
</script>

请记住，脚本运行后尚未定义“计数”。

如何使用.innerHTML更新窗口中的文本

3 个答案: