您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍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"> <h3 align="center">计时器</h3> <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>
以上是“JavaScript如何实现简单计时器”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。