问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js自动开始自动停止计时的问题

头像
纯洁的我啊
    42625

    图像 062.png
    代码：

     <body>
    小闹钟: <span id="colock" ></span><br>
    <input type="button" value="开始计时" id="start" onclick="start()" >
    <input type="button" value="停止计时" id="stop" onclick="stop()">
    <script type="text/javascript">
    //获取元素id
        var start_obj = document.getElementById("start");
        var stop_obj = document.getElementById("stop");
        var span_obj = document.getElementById("colock");
        //var time_id = window.setInterval("show_time()",1000);
        function show_time()
        {
            var time_now = new Date();
            time_now = time_now.toLocaleString();
            span_obj.innerHTML = time_now;
        }
        function start()
        {
            if(start_obj.value == "开始计时")
            {
                window.setInterval("show_time()",1000);
            }
        }
        function stop()
        {
            if(stop_obj.value == "停止计时")
            {
                clearInterval(time_id);//clearInterval() 取消由 setInterval() 设置的 timeout。
            }
        }
    </script>
 </body>
    javascript
    阅读 4k
    3 个回答
    得票最新
    头像
    如若时光萧瑟去丶
      1115
      ✓ 已被采纳

      1.把time_id放在函数外，作为全局可访问的变量。
      2.点击开始计时时，再赋值给time_id

      time_id = window.setInterval("show_time()",1000);

      3.停止计时clearInterval(time_id);

      头像
      linong
        29.2k1368137
        1. //var time_id = window.setInterval("show_time()",1000);改为var time_id
          这样表示申明了一个变量，因为要求单击开始才开始，所以也不用赋值

        2. 修改启动时代码，注意不能启动多个定时任务。

          function start(){
            if(start_obj.value == "开始计时"){
                window.setInterval("show_time()",1000);
            }
        }
          function start(){
            if(!time_id){//如果有值就表明当前有任务在执行，就不用setInterval了
                time_id = setInterval(show_time,1000);
            }
        }

        3. 修改结束时代码。注意清空标志位

           function stop() {
             if(stop_obj.value == "停止计时"){
                 clearInterval(time_id);//clearInterval() 取消由 setInterval() 设置的 timeout。
             }
         }
           function stop() {
     clearInterval(time_id);
     time_id = 0;//因为已经停止，所以要把标志位清空
 }
        头像
        冉娃娃
          1.2k1790123

          HTML

          <div  id="start"  onclick="countDown.start()">开始</div>
<div id="time">0</div>
<div  id="end"  onclick="countDown.end()">结束</div>

          JavaScript

          var CountDown = (function () {
  var instance = null;
  return function () {
    if (instance) {
      console.log('永远只会实例化一次');
      return instance;
    }
    console.log('第一次实例化');
    var timer;
    var $time = document.querySelector('#time');
    var time = 0;
    function start() {
      if (timer) {
        console.log('同时只能运行一个计时器');
        return;
      }
      console.log('开始计时');
      timer = setInterval(function () {
        time += 1;
        $time.textContent = time;
      }, 1000);
    }
    function end() {
      clearInterval(timer);
      timer = undefined;
    }
    instance = {
      start,
      end,
    };
    return instance;
  };
})();
var countDown = new CountDown();
countDonw.start();
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题