计时器 

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  
 </style>
</head>
 
<body>
    
 <div>
   <span id="id_H">00</span>
   <span>:</span>
   <span id="id_M">00</span>
   <span>:</span>
   <span id="id_S">00</span>
  
  <input id="start" type="button" value="开始">
  <input id="pause" type="button" value="暂停">
  <input id="stop" type="button" value="停止">
 </div>
 <script src="http://www.h5al.cn/js/jquery-1.11.3.min.js"></script>
 <script>

  //可以将查找标签节点的操作进行简化 var btn = getElementById('btn')
  // function $(id) {
  //  return document.getElementById(id)
  // }

   //点击开始建 开始计数
   var count = 654
   var timer = null //timer变量记录定时器setInterval的返回值
   $("#start").click(function() {
    timer = setInterval(function() {
     count++;
     console.log(count)
      // 需要改变页面上时分秒的值
     console.log($("id_S"))
     $("#id_S").html(showNum(count % 60))
     $("#id_M").html(showNum(parseInt(count / 60) % 60))
     $("#id_H").html(showNum(parseInt(count / 60 / 60)))
    }, 1000)
   })
   $("#pause").click(function() {
     //取消定时器
     clearInterval(timer)
    })
    //停止记数 数据清零 页面展示数据清零
   $("#stop").click(function() {
    //取消定时器
    $("#pause").click()
     // clearInterval(timer)
     //数据清零 总秒数清零
    count = 0
     //页面展示数据清零
    $("#id_S").html("00")
    $("#id_M").html("00")
    $("#id_H").html("00")
   })
 
   //封装一个处理单位数字的函数
   function showNum(num) {
    if (num < 10) {
     return '0' + num
    }
    return num
   }
  
 </script>
</body>
 
</html>

 

posted @ 2021-10-27 15:25  石头记1  阅读(16)  评论(0)    收藏  举报