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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
js中for in的用法示例解析
Dec 25 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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
php 执行系统命令的方法
2009/07/07 PHP
php csv操作类代码
2009/12/14 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
财务助理岗位职责范本
2014/10/09 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书