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 相关文章推荐
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
详细分析Node.js 模块系统
Jun 28 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
python二叉树的实现实例
2013/11/21 Python
python检测远程udp端口是否打开的方法
2015/03/14 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
python 将Excel转Word的示例
2021/03/02 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
中专生职业生涯规划书范文
2014/01/10 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
影子教师研修方案
2014/06/14 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
五好家庭事迹材料
2014/12/20 职场文书
诚信承诺书
2015/01/19 职场文书
建党伟业的观后感
2015/06/01 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python