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 相关文章推荐
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
基于js实现数组相邻元素上移下移
May 19 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 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
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
详解PHP PDO简单教程
2019/05/28 PHP
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
详解Python发送邮件实例
2016/01/10 Python
使用python绘制常用的图表
2016/08/27 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
python协程之动态添加任务的方法
2019/02/19 Python
python画图的函数用法以及技巧
2019/06/28 Python
python scipy卷积运算的实现方法
2019/09/16 Python
python通过链接抓取网站详解
2019/11/20 Python
Python实现图像的垂直投影示例
2020/01/17 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
如何对python的字典进行排序
2020/06/19 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
贸易经济专业自荐书
2014/06/29 职场文书
幼儿园教师求职信
2015/03/20 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL