本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- JS 页面计时器示例代码
- Node.js中使用计时器定时执行函数详解
- 原生js实现秒表计时器功能
- javascript实现计时器的简单方法
- javascript设计简单的秒表计时器
- JavaScript分秒倒计时器实现方法
- javascript 秒表计时器实现代码
- js实现倒计时器自定义时间和暂停
- js实现秒表计时器
- javascript计时器事件使用详解
本文由 华域联盟 原创撰写:华域联盟 » JavaScript实现简单计时器
转载请保留出处和原文链接:https://www.cnhackhy.com/72272.htm