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 相关文章推荐
js Flash插入函数免激活代码
Mar 31 Javascript
js验证是否为数字的总结
Apr 14 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 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
Javascript 二维数组
2009/11/26 Javascript
js 文件引入实现代码
2010/04/23 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
JavaScript错误处理
2015/02/03 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
学习Node.js模块机制
2016/10/17 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
Python ZipFile模块详解
2013/11/01 Python
构建Python包的五个简单准则简介
2015/06/15 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
Python闭包函数定义与用法分析
2018/07/20 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
激励员工的口号
2014/06/16 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
平安家庭事迹材料
2014/12/20 职场文书
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis