m0_46602893
m0_46602893
2021-04-14 23:31
采纳率: 59.1%
浏览 23

js问题,这里面的秒表代码中isRunning的真假到底是什么意思?

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            #box{width: 300px;height: 400px;border: 3px solid black; background-color: burlywood;margin: 50px auto;}
            button{width: 100px;height: 50px; background-color: black;color: white;margin: 30px auto;display: block;}
            #box1{text-align: center;margin-top: 30px;font-size: 50px;}
      </style>
      <script>
            function $(id){
                  return document.getElementById(id);
            }
            var i = 0;
            var timer = null;
            var isRunning = false;
            window.onload = function(){
                  function start(){
                     timer  = setInterval(function(){
                              i++
                              $("sec").innerHTML = scc(i % 60);
                              $("min").innerHTML = scc(parseInt(i / 60) % 60);
                              $("hour").innerHTML = scc(parseInt (i / 3600));
                        },1000)
                  }
                 function end(){
                        clearInterval(timer);
                  }
                  $("bt1").onclick = function(){
                        if(!isRunning){
                              $("bt1").innerHTML = "暂停";
                              isRunning = true;
                              start();
                              }else{
                                    $("bt1").innerHTML = "开始";
                                    isRunning = false;
                                    end();
                              }


                  }
                  $("bt3").onclick = function(){
                        clearInterval(timer);

                        i = 0;
                        $("bt1").innerHTML = "开始";
                        $("sec").innerHTML = "00";
                        $("min").innerHTML = "00";
                        $("hour").innerHTML = "00";
                  }
            }



            function scc(n){
                  if(n < 10){
                        return "0" + n;
                  }else
                  return n;

            }
      </script>
</head>
<body>
      <div id="box">
            <div id="box1">
                  <span id="hour">00</span>
                  <span>:</span>
                  <span id="min">00</span>
                  <span>:</span>
                  <span id="sec">00</span>
            </div>

            <button id="bt1">开始</button>
            <!-- <button id="bt2">暂停</button> -->
            <button id="bt3">复位</button>
      </div>
</body>
</html>

我认为inRunning只是人为的语义化标签,上面代码中说它的真假代表秒表的启动与停止;但是我认为它只是用于对

$("bt1").onclick = function(){

                        if(!isRunning){

                              $("bt1").innerHTML = "暂停";

                              isRunning = true;

                              start();

                              }else{

                                    $("bt1").innerHTML = "开始";

                                    isRunning = false;

                                    end();

                              }

这段代码是否运行start和end函数的一个工具,其实它本身不代表什么,但是为什么当我注释掉 isRunning = false; isRunning = true的时候它无法正常运行,这是为什么???

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • Lazy33
    Lazy33 2021-04-15 00:14
    已采纳

    那咱们捋一捋,点击开始的时候,执行计时,如果你想暂停,就得用bt2,但是你注释掉了。

    1、所以开始之后,你只能再点击开始,也只是让start再次执行,当你点击之后,setInterval计时器就会再次创建一个,原来的不会消失,而且会继续运行!变量i,在1000毫秒之内再加一次。最后i会越来越快,表会走的越来越快,你没办法停止。

    2、你点击开始,之后除了开始只能点复位,复位之后,计时器并没有清除,你只是另i = 0,所以数字一下变为0,还是会继续往上加。而且你只能清除最后一个你创建的setInterval,其他的没办法

     

    所以isRunning再这里面充当了一个“开关”,它表示setInterval的一个状态。如果开了,就关掉它,如果关闭我就打开它。

     

    其实主要是计时器,不是他在运行后,你再调用它,他就会暂停,他会一直调用,一直累加而已

    点赞 评论
  • wanmeikakaxi
    wanmeikakaxi 2021-04-15 00:15
                var i = 0;
                var timer = null;
                var isRunning = false;
    			// i, timer, isRunning  定义全局变量声明
    
    			//当窗口载入时
                window.onload = function(){
    				//执行start() 函数
                      function start(){
                         timer  = setInterval(function(){
                                  i++
                                  $("sec").innerHTML = scc(i % 60);
                                  $("min").innerHTML = scc(parseInt(i / 60) % 60);
                                  $("hour").innerHTML = scc(parseInt (i / 3600));
                            },1000)
                      }
                     function end(){
                            clearInterval(timer);
                      }
    				  //点击bt1时
                      $("bt1").onclick = function(){
    					  //判断isRunning状态
    					  //如果isRunning为xxxxx,把isRunning 状态设置成 true;并则执行start()
                            if(!isRunning){
                                  $("bt1").innerHTML = "暂停";
                                  isRunning = true;
                                  start();
                                  }else{
    							   //否则isRunning = false,并执行end()结束函数
                                        $("bt1").innerHTML = "开始";
                                        isRunning = false;
                                        end();
                                  }
    
    
                      }
    点赞 评论
  • Lazy33
    Lazy33 2021-04-15 09:17

    字儿变成暂停了,如果不要isRunning,你的代码还是创建定时器,有啥区别么?

    点赞 评论

相关推荐