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 相关文章推荐
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
vue 子组件watch监听不到prop的解决
Aug 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
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
PHP类的反射用法实例
2014/11/03 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
python实现基本进制转换的方法
2015/07/11 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
致长跑运动员广播稿
2014/01/31 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
2014年科研工作总结
2014/12/03 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
图解上海144收音机
2021/04/22 无线电
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android