函数clearInterval的使用疑问.

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>计时器</title>
    <script type="text/javascript">

        //获取当前时间并赋值给显示输入框的value
        function clock(){
            var time=new Date();
            document.getElementById("clock").value = time;
        }

        //每秒执行一次赋值方法
         function start(){
                var i =  setInterval("clock()",100);
          }

        //想让时间显示停下来的方法

          function stop(){
              
                  var i =  setInterval("clock()",100)
                  clearInterval(i);
           }
    </script>
</head>
<body>
<form>
    <input type = "text" id = "clock" size = "50"  />
    <input type = "button" value = "start" onclick = "start()" />
    <input type="button" value="stop" onclick= "stop()" >
</form>
</body>
</html>

当点击"start"的时候 输入框里的时间显示正常,达到预期的动态显示时间的效果.

问题是:当点击"stop"的时候,希望实现的功能是:input里面的时间不再随时间变化,停在当前时间,我自己写的不知道哪里问题,时间还是会动态变化的.

bestDove
浏览 1947回答 2
2回答

刚毅87

<!DOCTYPE HTML> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <title>计时器</title>     <script type="text/javascript">      //将 赋值给i 写在函数外面   var i;         //获取当前时间并赋值给显示输入框的value         function clock(){             var time=new Date();             document.getElementById("clock").value = time;         }         //每秒执行一次赋值方法          function start(){            // 使用定时器要遵循先关后开的原则,不然多次点击会加速            clearInterval(i);                  i =  setInterval("clock()",100);           }           function stop(){                   clearInterval(i);            }     </script> </head> <body> <form>     <input type = "text" id = "clock" size = "50"  />     <input type = "button" value = "start" onclick = "start()" />     <input type="button" value="stop" onclick= "stop()" > </form> </body> </html>注释都写在代码中了.望采纳!
打开App,查看更多内容
随时随地看视频慕课网APP