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 设置选中行的样式的实现代码
May 24 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 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
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
python中base64加密解密方法实例分析
2015/05/16 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
python多线程使用方法实例详解
2019/12/30 Python
如何基于python实现归一化处理
2020/01/20 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
Python列表操作方法详解
2020/02/09 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
计算机专业毕业生求职信分享
2013/12/24 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
财务总监管理职责范文
2014/03/09 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
初中语文教师研修日志
2015/11/13 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
python神经网络 使用Keras构建RNN训练
2022/05/04 Python