js实现计时器秒表功能


Posted in Javascript onDecember 16, 2019

本文实例为大家分享了js实现计时器秒表功能的具体代码,供大家参考,具体内容如下

HTML

<input type="text" id="timetext" value="00:00:00" readonly>
<button type="button" onclick="start()">开始</button> 
<button type="button" onclick="stop()">暂停</button> 
<button type="button" onclick="Reset()">重置</button>

Script

<script>
  var hour,minute,second;//时 分 秒
  hour=minute=second=0;//初始化
  var millisecond=0;//毫秒
  var int;
  function Reset()//重置
  {
   window.clearInterval(int);
   millisecond=hour=minute=second=0;
   document.getElementById('timetext').value='00:00:00:000';
  }
 
  function start()//开始
  {
   int=setInterval(timer,50);
  }
 
  function timer()//计时
  {
   millisecond=millisecond+50;
   if(millisecond>=1000)
   {
    millisecond=0;
    second=second+1;
   }
   if(second>=60)
   {
    second=0;
    minute=minute+1;
   }
 
   if(minute>=60)
   {
    minute=0;
    hour=hour+1;
   }
   document.getElementById('timetext').value=toDub(hour)+':'+toDub(minute)+':'+toDub(second);
 
  }

  function stop()//暂停
  {
   window.clearInterval(int);
  }
  //补零
  function toDub(n){
    return n<10?"0"+n:""+n;
  }
</script>

如图:

js实现计时器秒表功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 #Javascript
axios如何取消重复无用的请求详解
Dec 15 #Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 #Javascript
Angular6项目打包优化的实现方法
Dec 15 #Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 #Javascript
Vue+ElementUI table实现表格分页
Dec 14 #Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 #Javascript
You might like
PR值查询 | PageRank 查询
2006/12/20 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python采用Django开发自己的博客系统
2020/09/29 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
经济信息管理专业大学生求职信
2013/09/27 职场文书
财务会计专业求职信范文
2013/12/31 职场文书
简历里的自我评价范文
2014/02/24 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
车队安全员岗位职责
2015/02/15 职场文书