- 资讯首页 > 开发技术 > web开发 > JavaScript >
- 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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
免责声明:本站发布的内容(图片、视频和文字)以原创、来自本网站内容采集于网络互联网转载等其它媒体和分享为主,内容观点不代表本网站立场,如侵犯了原作者的版权,请告知一经查实,将立刻删除涉嫌侵权内容,联系我们QQ:712375056,同时欢迎投稿传递力量。
Copyright © 2009-2022 56dr.com. All Rights Reserved. 特网科技 特网云 版权所有 特网科技 粤ICP备16109289号
域名注册服务机构:阿里云计算有限公司(万网) 域名服务机构:烟台帝思普网络科技有限公司(DNSPod) CDN服务:阿里云计算有限公司 百度云 中国互联网举报中心 增值电信业务经营许可证B2
建议您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流浏览器浏览本网站