JavaScript中简单的定时器

定时器功能分析

            核心思路:

                  定义一个变量,根据定时器,每秒执行一次,每次执行++自增操作

                 变量存储的数值,就会每秒+1

                 现在需要的记录效果,是每0.01秒,也就是10毫秒执行一次

                 根据累计的数值,执行进位 ms 如果达到 100,就是1秒

                 如果 秒 达到 60 就是 1分钟

                 如果 分钟 达到 60 就是 1小时

 

效果图：

    

 

   <div>00:00:00:00</div>
    <button>开始</button>
    <button disabled>暂停</button>
    <button disabled>继续</button>
    <button disabled>重置</button>
<script>
        var ms = 0;  // 毫秒
        var s = 0;   // 秒
        var m = 0;   // 分钟
        var h = 0;   // 小时
        // 定义存储 时 分 秒 毫秒 字符串的变量
        // 如果直接在 ms s m h 变量上进行 拼接操作,会影响 ++操作的执行
        // 单独的建立变量,来存储累加时间的执行结果
        var msstr = '';
        var sstr = '';
        var mstr = '';
        var hstr = '';
        // 因为定时器,是定义在函数内部,
        // 必须定义一个全局变量,来存储定时器
        // 在函数外部可以调用,终止定时器
        var time = 0;
        // 获取div标签对象
        var odiv = document.queryselector('div');
        // 获取按钮的标签对象
        var ostart = document.queryselectorall('button')[0];
        var opause  = document.queryselectorall('button')[1];
        var ocont = document.queryselectorall('button')[2];
        var oreset = document.queryselectorall('button')[3];
</script>

开始按钮：

 1      ostart.onclick = function(){
 2             // 点击开始按钮,执行函数,执行秒表计时
 3             settimestr();
 4             // 可以点暂停
 5             opause.disabled = false;
 6             // 其他标签都不能点
 7             ostart.disabled = true;
 8             ocont.disabled = true;
 9             oreset.disabled = true;
10         }

暂定按钮：

 1      opause.onclick = function(){
 2             // 点击暂停按钮,清除定时器,终止秒表执行
 3             clearinterval(time);
 4             // 暂停本身和开始不能点
 5             opause.disabled = true;
 6             ostart.disabled = true;
 7             // 继续和重置能点了
 8             ocont.disabled = false;
 9             oreset.disabled = false;
10         }

继续按钮：

 1     ocont.onclick = function(){
 2             // 点击继续按钮,继续执行定时器
 3             settimestr();
 4             // 暂停可以点
 5             opause.disabled = false;
 6             // 其他都不能点
 7             ocont.disabled = true;
 8             oreset.disabled = true;
 9             ostart.disabled = true;
10         }

重置按钮：

 1      oreset.onclick = function(){
 2             // 点击重置按钮,将所有的数据,都恢复到0的状态
 3             // 所有变量存储的数据都是 0 , div中的内容,也恢复到0
 4             // 定义所有存储时间的变量,存储的数值为0 
 5             ms = 0;  // 毫秒
 6             s = 0;   // 秒
 7             m = 0;   // 分钟
 8             h = 0;   // 小时
 9             // 将div中的内容,设定为初始状态的00:00:00:00内容
10             odiv.innerhtml = '00:00:00:00';
11             // 开始可以点
12             ostart.disabled = false;
13             // 其他都不能点
14             opause.disabled = true;
15             ocont.disabled = true;
16             oreset.disabled = true;
17         }

定义函数,这个函数的作用就是记录,执行的时间：

 1     function settimestr(){
 2             // 赋值操作,将定时器,存储在全局作用域变量中
 3             // 此处只是赋值操作
 4             time = setinterval(function(){
 5                 ms++;
 6                 // 毫秒 是 10毫秒一增加
 7                 // ms存储的数值,如果达到100,就是1秒种了
 8                 // 给 秒单位 进位  s++ 
 9                 // ms本身,需要重新开始记录数值
10                 // 0:0:0:99  ---> 0:0:1:00
11                 if(ms == 100){
12                     s++;       // 秒进位
13                     ms = 0;    // ms本身清零,重新记录
14                 }
15                 if(s == 60){
16                     m++;       // 分钟进位 
17                     s = 0;     // s秒 清零
18                 }
19                 if(m == 60){
20                     h++;       // 小时进位 
21                     m = 0;     // m分钟 清零
22                 }
23                 // 小时记录,可以每24小时清零一次
24                 // 或者 100小时清零一次,都可以,根据需求来
25                 if(h == 100){
26                     h = 0;
27                 }
28                 // 如果记录的时间小于0,要做补零操作
29                 if(ms < 10){
30                     msstr = '0' + ms;
31                 }else{
32                     msstr = ms;
33                 }
34                 if(s < 10){
35                     sstr = '0' + s;
36                 }else{
37                     sstr = s;
38                 }
39                 if(m < 10){
40                     mstr = '0' + m;
41                 }else{
42                     mstr = m;
43                 }
44                 if(h < 10){
45                     hstr = '0' + h;
46                 }else{
47                     hstr = h;
48                 }
49                 // 每次执行,返回一个记录时间的字符串
50                 // 将这个字符串,写入到div中
51                 odiv.innerhtml = `${hstr}:${mstr}:${sstr}:${msstr}`;
52             } , 10);              
53             console.log(time);
54         }