欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript中简单的定时器

程序员文章站 2022-03-26 14:48:10
定时器功能分析 核心思路: 定义一个变量,根据定时器,每秒执行一次,每次执行++自增操作 变量存储的数值,就会每秒+1 现在需要的记录效果,是每0.01秒,也就是10毫秒执行一次 根据累计的数值,执行进位 ms 如果达到 100,就是1秒 如果 秒 达到 60 就是 1分钟 如果 分钟 达到 60  ......
定时器功能分析
            核心思路:
                  定义一个变量,根据定时器,每秒执行一次,每次执行++自增操作
                 变量存储的数值,就会每秒+1
                 现在需要的记录效果,是每0.01秒,也就是10毫秒执行一次
                 根据累计的数值,执行进位 ms 如果达到 100,就是1秒
                 如果 秒 达到 60 就是 1分钟
                 如果 分钟 达到 60 就是 1小时
 
效果图:
    JavaScript中简单的定时器
 
   <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         }