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 jq 单击和双击区分示例介绍
Nov 05 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
javascript的BOM
May 03 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
el-form 多层级表单的实现示例
Sep 10 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
PHP学习之PHP表达式
2006/10/09 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
python字典基本操作实例分析
2015/07/11 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
Django中使用Celery的方法示例
2018/11/29 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python匿名函数用法实例分析
2019/08/03 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python 日期与时间转换的方法
2020/08/01 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
护理学专业求职信
2014/06/29 职场文书
端午节寄语2015
2015/03/23 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
教师反邪教心得体会
2016/01/15 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
nginx静态资源的服务器配置方法
2022/07/07 Servers