快活林资源网 Design By www.csstdc.com
效果图展示,感觉不错可以参考实例代码。
具体代码如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>00:00:00:00</div> <button>开始</button> <button disabled>暂停</button> <button disabled>继续</button> <button disabled>重置</button> <script> //定义一个变量,根据定时器每秒执行一次,每次执行++自增操作,变量存储的数值,就会每秒+1。现在需要的记录效果是每0.01秒,也就是10毫秒执行一次。根据累计的数值执行进位。如果毫秒达到100就是1秒,如果秒达到60就是1分钟,如果分钟达到60就是1小时 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]; // 重置 // 给四个按钮添加点击事件效果 // 开始按钮 oStart.onclick = function(){ // 点击开始按钮执行函数,执行秒表计时 setTimeStr(); // 可以点暂停 oPause.disabled = false; // 其他标签都不能点 oStart.disabled = true; oCont.disabled = true; oReset.disabled = true; } // 暂停按钮 oPause.onclick = function(){ // 点击暂停按钮,清除定时器,终止秒表执行 clearInterval(time); // 暂停本身和开始不能点 oPause.disabled = true; oStart.disabled = true; // 继续和重置能点了 oCont.disabled = false; oReset.disabled = false; } // 继续按钮 oCont.onclick = function(){ // 点击继续按钮,继续执行定时器 setTimeStr(); // 暂停可以点 oPause.disabled = false; // 其他都不能点 oCont.disabled = true; oReset.disabled = true; oStart.disabled = true; } // 重置按钮 oReset.onclick = function(){ // 点击重置按钮,将所有的数据都恢复到0的状态 // 所有变量存储的数据都是0, div中的内容也恢复到0 // 定义所有存储时间的变量存储的数值为0 ms = 0; // 毫秒 s = 0; // 秒 m = 0; // 分钟 h = 0; // 小时 // 将div中的内容,设定为初始状态的00:00:00:00内容 oDiv.innerHTML = '00:00:00:00'; // 开始可以点 oStart.disabled = false; // 其他都不能点 oPause.disabled = true; oCont.disabled = true; oReset.disabled = true; } // 每次点击开始按钮或者继续按钮都会调用执行函数,都会生成一个新的定时器。time中存储的是当前这个新的定时器,是整个程序中定时器的序号 // 例如点击开始按钮10次会生成10个定时,time中存储最后一个定时器的序号10 // 当点击暂停按钮时,清除的是time中存储的序号是10的这一个定时器,之前 1-9定时器仍然会执行 // 解决方法:点击开始按钮之后,在点击暂停按钮之前,禁止再次点击开始按钮。也就是在清除原有定时器之前,不允许生成新的定时器 // 定义函数,这个函数的作用就是记录执行的时间,有小时、分钟、秒、毫秒 4个部分。将记录的时间写入到div中,div中起始时默认都是0 function setTimeStr(){ // 赋值操作,将定时器,存储在全局作用域变量中 // 此处只是赋值操作 time = setInterval(function(){ ms++; // 毫秒是10毫秒一增加 // ms存储的数值如果达到100,就是1秒种了 // 给秒单位进位 s++ // ms本身需要重新开始记录数值 // 0:0:0:99 ---> 0:0:1:00 if(ms == 100){ s++; // 秒进位 ms = 0; // ms本身清零,重新记录 } if(s == 60){ m++; // 分钟进位 s = 0; // s秒 清零 } if(m == 60){ h++; // 小时进位 m = 0; // m分钟 清零 } // 小时记录可以每24小时清零一次,或者100小时清零一次,都可以 if(h == 100){ h = 0; } // 如果记录的时间小于0,要做补零操作 if(ms < 10){ msStr = '0' + ms; }else{ msStr = ms; } if(s < 10){ sStr = '0' + s; }else{ sStr = s; } if(m < 10){ mStr = '0' + m; }else{ mStr = m; } if(h < 10){ hStr = '0' + h; }else{ hStr = h; } // 每次执行返回一个记录时间的字符串,将这个字符串写入到div中 oDiv.innerHTML = `${hStr}:${mStr}:${sStr}:${msStr}`; } , 10); console.log(time); } </script> </body> </html>
ps:下面看下JavaScript实现计时器,一个按钮实现开始和停止的功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var intervalId; var i = 0; var count=0; function startTime(){ var hour = document.getElementById("hour"); var minute = document.getElementById("minute"); var second = document.getElementById("second"); var ms = document.getElementById("ms"); var buttonEle = document.getElementById("start"); if(i%2==0){ buttonEle.innerHTML="暂停计时"; intervalId = setInterval(function(){ count += 1; var thehour=parseInt(count/360000); var theminute=parseInt(count/6000%60); var thesecond=parseInt(count/100%60); var thems = parseInt(count%100); if(thehour>=10){ hour.innerHTML=thehour+" "; } else{ hour.innerHTML="0"+thehour+" "; } if(theminute>=10){ minute.innerHTML=theminute+" "; } else{ minute.innerHTML="0"+theminute+" "; } if(thesecond>=10){ second.innerHTML=thesecond+" "; } else{ second.innerHTML="0"+thesecond+" "; } if(thems>=10){ ms.innerHTML=thems+" "; } else{ ms.innerHTML="0"+thems+" "; } },10) } else{ buttonEle.innerHTML="开始计时"; clearInterval(intervalId); } i++; } </script> <style type="text/css"> body,html{ background: violet; /*position: relative;*/ } #firstDiv{ height: 50%; width:50% ; position:absolute; margin-left: 350px; margin-top:150px; background: #ffcccc; } #twoDiv{ height: 200px; width:100%; position: absolute; margin-top: 130px; margin-left: 130px;; } span{ font-size: 30px; } button{ font-size: 20px; } </style> </head> <body> <div id="firstDiv"> <div id="twoDiv"> <span><span id="hour">00 </span>时</span> <span><span id="minute">00 </span>分</span> <span><span id="second">00 </span>秒</span> <span><span id="ms">00 </span>毫秒</span> <button id="start" οnclick="startTime()">开始计时</button> </div> </div> </body> </html>
总结
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]