javascript 秒表计时器实现代码


Posted in Javascript onMarch 09, 2017

javascript 秒表计时器

实例代码:

<html lang="en">
<head>
<meta charset="UTF-8">
<title>js计时器</title>
</head>
<body>
<input type="text" value="00:00">
<input type="button" value="开始">
<input type="button" value="结束">
<input type="button" value="重置">
<script>

  var oTxt=document.getElementsByTagName("input")[0];
  var oStart=document.getElementsByTagName("input")[1];
  var oStop=document.getElementsByTagName("input")[2];
  var oReset=document.getElementsByTagName("input")[3];
  var n= 0, timer=null;
  //开始计时
  oStart.onclick= function () {
    clearInterval(timer);
    timer=setInterval(function () {
      n++;
      var m=parseInt(n/60);
      var s=parseInt(n%60);
      oTxt.value=toDub(m)+":"+toDub(s);
    },1000/60);
  };
  //暂停并且清空计时器
  oStop.onclick= function () {
    clearInterval(timer);
  }
  //重置
  oReset.onclick= function () {
    oTxt.value="00:00";
    n=0;
  }
  //补零
  function toDub(n){
    return n<10?"0"+n:""+n;
  }
</script>
</body>
</html>

在计时器设置运行间隔那里,一开始设置了100,其实是不对的,因为 1秒=1000毫秒;我们要分成60个数字来显示,所以还是要除以60才对。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 #Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 #Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 #Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 #Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 #Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 #Javascript
js实现时间轴自动排列效果
Mar 09 #Javascript
You might like
中国收音机工业发展史
2021/03/02 无线电
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
python计算两个地址之间的距离方法
2018/06/09 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
Python连接Impala实现步骤解析
2020/08/04 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
行政助理岗位职责
2013/11/10 职场文书
学习十八大精神心得体会
2013/12/31 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
保护环境建议书
2014/03/12 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
家长反馈意见及建议
2015/06/03 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android