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 }
