zoukankan      html  css  js  c++  java
  • 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         }
  • 相关阅读:
    如何增加学习感悟
    古代到清朝历史及文化
    至少的问题
    两次相遇同一地点
    行测都是选择题总结经验
    DES加密实现的思想及代码
    AES算法
    线性代数中行列与矩阵的联系和区别
    学习phalcon框架按照官网手册搭建第一个项目注册功能
    phpadmin增加使得项目能连接数据库
  • 原文地址:https://www.cnblogs.com/yanhui6/p/12650011.html
Copyright © 2011-2022 走看看