clearInterval()不使用JavaScript的时钟计时器

Question

clearInterval()不使用JavaScript的时钟计时器

una*_*ame 5 html javascript setinterval jsfiddle clearinterval

我对JavaScript和编程很新.我目前正处于一个小腌菜中,我正在玩一些代码,我想知道是否有人可以给我一些建议.

背景:

我正在使用的代码非常简单; 有一个时钟,当前时间在setInterval上运行,以便按秒更新.

在时钟下方有一个按钮,显示"停止",按下时,它将清除间隔,然后按钮将显示"开始".如果按下再次按下"开始"的按钮,它将继续时钟计时器在当前时间.所以基本上这一个按钮切换时钟的间隔,并且根据它的状态,按钮将显示"开始"或"停止".

W3Schools:JS Timing是我在创建我正在使用的代码时最初引用的地方.这是我在学习setInterval和clearInterval如何工作的地方.我还在示例中采用了一些代码并对其进行了调整,以便我可以尝试关闭和打开时钟计时器.

码:

var clock09 = window.setInterval(myTimer09, 1000);

function myTimer09() {
  var d = new Date();
  var t = d.toLocaleTimeString();
  document.getElementById("req09").innerHTML =
    "<h1>" + t + "</h1>";
}

function toggle10() {
  var button = document.getElementById("button10").innerHTML;
  if (button == "Stop") {
    window.clearInterval(clock09);
    document.getElementById("button10").innerHTML = "Start";
  } else {
    clock09 = window.setInterval(myTimer09, 1000);

    document.getElementById("button10").innerHTML = "Stop";
  }
}

Run Code Online (Sandbox Code Playgroud)

<span class="center" id="req09"></span>
<button type="button" id="button10" onclick="toggle10()" class="button">Stop</button>

Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/dtc84d78/

问题:

所以我的代码问题是按钮从"停止"按钮切换到"开始"按钮,但是clearInterval不使用setInterval应用于变量.

我在谷歌搜索过类似的问题,比如这个,我听从了他们的建议,但仍然没有.经过几个小时的努力弄清楚,我决定只将W3Schools的一些例子直接复制并粘贴到jsFiddle,这甚至都不起作用(包含在jsfiddle链接中)？

我真的只是疯了为什么clearInterval()与我没有合作？可能是我的电脑,浏览器或其他什么？我作为我的最后资源来到SO,所以如果有人能给我一些指导这个问题,我会在你之后给我的第一个孩子起名.

先感谢您.

额外信息: 我目前正在使用Mac桌面,使用Komodo编写代码,我正在使用谷歌浏览器预览代码.

更新:

我在评论中提到过这一点,但代码中的内容是在外部.js文件中.然后将.js文件链接在head标签之间,并且在end body标签之前.

<head>
  <meta charset="utf-8" />
  <title>Program</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/program-05.css">
  <script type="text/javascript" src="scripts/program-05.js">
    /* <![CDATA[ */
    /* ]]> */
  </script>
</head>

<body onload="checkCookies(); setTimeout(function() { func11() }, 5000);">

  . . . code for stuff

  . . . code for clock timer

  . . . code for other stuff

  <script type="text/javascript" src="scripts/program-05.js">
    /* <![CDATA[ */
    /* ]]> */
  </script>
</body>

Run Code Online (Sandbox Code Playgroud)

在@Matz提到将时钟定时器js代码粘贴在head部分后,代码工作得很好!这就是目前为止在头部看起来的样子.

<head>
  <meta charset="utf-8" />
  <title>Program</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/program-05.css">
  <script type="text/javascript" src="scripts/program-05.js">
    /* <![CDATA[ */
    /* ]]> */
  </script>
  <script>
    ///*
    var clock09 = window.setInterval(myTimer09, 1000);

    function myTimer09() {
      var d = new Date();
      var t = d.toLocaleTimeString();
      document.getElementById("req09").innerHTML =
        "<h1>" + t + "</h1>";
    }

    function toggle10() {
        var button = document.getElementById("button10").innerHTML;
        if (button == "Stop") {
          window.clearInterval(clock09);
          document.getElementById("button10").innerHTML = "Start";
        } else {
          clock09 = window.setInterval(myTimer09, 1000);

          document.getElementById("button10").innerHTML = "Stop";
        }
      }
      //*/
  </script>
</head>

Run Code Online (Sandbox Code Playgroud)

虽然这很好用,但我现在想弄清楚为什么时钟定时器js代码直接在head部分中工作,而不是将它保存在外部.js文件中(外部文件在doc中链接) ？我该怎么做才能使它在外部文件中工作？

Answer 1

小智 0

修复计时器启动和停止的一种方法是将 JavaScript 移至 HEAD 标记之间，以便在 html 加载时声明函数。我做了这个工作：

<html>
  <head>
    <title>Stuff</title>

    <script >

      var clock09 = window.setInterval(myTimer09, 1000);

      .... your code

   </script>

  </head>
  <body>
    <span class="center" id="req09"></span>
    <button type="button" id="button10" onclick="toggle10()" class="button">Stop</button>

  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，1 月前
查看次数：	630 次
最近记录：	9 年，1 月前