怎样用JavaScript写一个简易的计时器？
发布时间：2022-02-25 13:35:53 所属栏目：语言 来源：互联网
导读：怎样用JavaScript写一个简易的计时器？这篇文章给大家分享用JavaScript实现计时器的内容，包含开始、停止和复位功能，小编觉得挺实用的，因此分享给大家做个参考，接下来一起跟随小编看看吧。 !DOCTYPE html html lang=en head meta charset=UTF-8 title计时
|
怎样用JavaScript写一个简易的计时器？这篇文章给大家分享用JavaScript实现计时器的内容，包含开始、停止和复位功能，小编觉得挺实用的，因此分享给大家做个参考，接下来一起跟随小编看看吧。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> <style> .bigDiv { margin: 50px auto; width: 200px; height: 200px; background-color: lightskyblue; border-radius: 10px; } #showNum { width: 200px; height: 20px; background-color: orange; text-align-all: center; border-radius: 5px; } </style> </head> <body> <div class="bigDiv"> <h2 align="center">计时器</h2> <div id="showNum" align="center"> 0 </div> <br> <br> <div class="butDiv"> <button type="button" id="start">开始</button> <button type="button" id="stop">停止</button> <button type="button" id="reset">复位</button> </div> </div> <script> //定义显示的时间 let int = null; /** * 开始 单击事件 */ document.getElementById("start").addEventListener('click', function () { if (int == null) { //设置定时器 //每隔参数二毫秒执行一次参数一 int = setInterval(startNum, 1000); } }); /** * 停止 单击事件 */ document.getElementById("stop").addEventListener('click', function () { //清除定时器， clearInterval(int); int = null; }); /** * 复位 单击事件 */ let num = 0; document.getElementById("reset").addEventListener('click', function () { if (int == null) { num = 0; //将时间变成0 document.getElementById("showNum").innerHTML = num; } }); function startNum() { num++; //持续改变时间 document.getElementById("showNum").innerHTML = num; } </script> </body> </html> （编辑：济源站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
