js怎么做一个计时器(JavaScript实现简单计时器)
类别:编程学习 浏览量:2241
时间:2021-10-24 10:36:14 js怎么做一个计时器
JavaScript实现简单计时器本文实例为大家分享了JavaScript实现简单计时器的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> <style> .bigli { 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> <li class="bigli"> <h2 align="center">计时器</h2> <li id="showNum" align="center"> 0 </li> <br> <br> <li class="butli">     <button type="button" id="start">开始</button>   <button type="button" id="stop">停止</button>   <button type="button" id="reset">复位</button>   </li> </li> <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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- linux用nvm安装nodejs(nodejs管理工具nvm安装过程详解)
- js事件冒泡与事件捕获(基于事件冒泡、事件捕获和事件委托详解)
- dede友情链接改为logo轮播教程(dedecms广告生成JS文件和JS调用-DEDE广告优化)
- auto.js源码分享(最新热门脚本Autojs源码分享)
- 微信发送镭射效果代码(JS实现微信"炸屎"大作战功能)
- js简单小游戏代码(用JS实现飞机大战小游戏)
- js的模块模式设计(如何理解JavaScript模块化)
- python操作json格式(详解python 3.6 安装json 模块simplejson)
- eval解析json字符串
- js防抖用法(JavaScript的防抖和节流案例)
- js RegExp用法
- thinkphp返回json(thinkphp5框架实现数据库读取的数据转换成json格式示例)
- Js如何判断浏览器类型和版本
- js基础入门到高级教程(浅谈如何循序渐进的学好JS)
- python编写程序读写数据库(详解js文件通过python访问数据库方法)
- jsp实现短信验证码(手动实现js短信验证码输入框)
- 怎么才可以财富自由(如何让自己实现财富自由)
- 为什么越来越多年轻人回农村(为什么越来越多年轻人回农村生活)
- 怎么快速学好英语(怎么快速学好英语初中)
- 中国留学生都是富二代吗()
- 我们现在吃的苹果是哪里来的 原来现代苹果引入中国仅有一百多年(我们现在吃的苹果是哪里来的)
- 买绿宝不能只挑黄绿色 菜农教你3招挑,个个皮薄肉脆,香甜爆汁(买绿宝不能只挑黄绿色)
热门推荐
- mysql创建表存在哪里(MySQL的表空间是什么)
- python如何编写一个用户登录系统(Python实现的登录验证系统完整案例基于搭建的MVC框架)
- centos linux开机不出现登录页面(在CentOS启动时自动加载内核模块overlayfs操作)
- vmware esxi搭建云桌面(VMware ESXI服务器虚拟化搭建集群)
- 织梦dede数据库(dedeCMS 织梦的日期时间格式大全最新)
- oracle自定义异常
- 自动化播放声音(video实现有声音自动播放的实现方法)
- mysql的字符串截取函数(MySQL实现字符串的拼接,截取,替换,查找位置的操作)
- 阿里云ecs实例详解(阿里云ecs服务器 修改php上传最大限制的方法)
- 小米机器狗用什么二次开发(小米正式开源 SQL 智能优化与改写工具 SOAR)