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 相关文章推荐
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
解析link_mysql的php版
2013/06/30 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
js实现表格字段排序
2014/02/19 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
机电工程学生自荐信范文
2013/12/07 职场文书
《穷人》教学反思
2016/02/19 职场文书