js实现秒表计时器
2019-12-17 12:05
876 查看
本文实例为大家分享了js实现秒表计时器的具体代码,供大家参考,具体内容如下
秒表计时器的实现:
效果图如下:
附代码,已调试运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #div1 { width: 300px; height: 400px; background: skyblue; margin: 100px auto; text-align: center; } #count { width: 200px; height: 150px; line-height: 150px; margin: auto; font-size: 40px; } #div1 input { width: 150px; height: 40px; background: orange; font-size: 25px; margin-top: 20px } </style> </head> <body> <div id="div1"> <div id="count"> <span id="id_H">00</span> <span id="id_M">00</span> <span id="id_S">00</span> </div> <input id="start" type="button" value="开始"> <input id="pause" type="button" value="暂停"> <input id="stop" type="button" value="停止"> </div> <script> //可以将查找标签节点的操作进行简化 var btn = getElementById('btn') function $(id) { return document.getElementById(id) } window.onload = function() { //点击开始建 开始计数 var count = 0 var timer = null //timer变量记录定时器setInterval的返回值 $("start").onclick = function() { timer = setInterval(function() { count++; console.log(count) // 需要改变页面上时分秒的值 console.log($("id_S")) $("id_S").innerHTML = showNum(count % 60) $("id_M").innerHTML = showNum(parseInt(count / 60) % 60) $("id_H").innerHTML = showNum(parseInt(count / 60 / 60)) }, 1000) } $("pause").onclick = function() { //取消定时器 clearInterval(timer) } //停止记数 数据清零 页面展示数据清零 $("stop").onclick = function() { //取消定时器 $("pause").onclick() // clearInterval(timer) //数据清零 总秒数清零 count = 0 //页面展示数据清零 $("id_S").innerHTML = "00" $("id_M").innerHTML = "00" $("id_H").innerHTML = "00" } //封装一个处理单位数字的函数 function showNum(num) { if (num < 10) { return '0' + num } return num } } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- 原生js实现秒表计时器功能
- 利用js+css3实现弹幕的淡入淡出效果
- js实现选中复选框文字变色的方法
- Node.js与Sails ~项目结构与Mvc实现及日志机制
- JS实现图片高亮展示效果实例
- js实现垂直滚动效果
- JS实现登录页密码的显示和隐藏功能
- js+json用表格实现简单网站左侧导航
- JS获取子窗口中返回的数据实现方法
- JS中利用递归实现数组快速排序
- JS实现标签页效果(配合css)
- VS C# .NET WebBrowser控件 利用插入JS代码,实现控制弹出IE窗口
- js实现map操作
- JS小功能(checkbox实现全选和全取消)实例代码
- js,jqueryajax实现页面加载等待效果
- JS实现常用的分享到按钮
- 学习笔记-DEMO:Js实现中英文翻译
- JS中简单的实现像C#中using功能(有源码下载)
- js使用Promise实现简单的Ajax缓存
- pageSwitch.js 实现全屏切换