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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
javascript学习小结之prototype
Dec 03 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
15个值得收藏的JavaScript函数
Sep 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数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
js异步加载的三种解决方案
2013/03/04 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
Python利用命名空间解析XML文档
2020/08/10 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
《蓝色的树叶》教学反思
2014/02/24 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
个人安全生产责任书
2014/07/28 职场文书
上班离岗检讨书
2014/09/10 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python