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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
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处理二进制数据的实现方法
2016/06/13 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
在Python中使用正则表达式的方法
2015/08/13 Python
Python分析学校四六级过关情况
2017/11/22 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
django中的图片验证码功能
2019/09/18 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
区域总监的岗位职责
2013/11/21 职场文书
卫生标语大全
2014/06/21 职场文书
检讨书范文1000字
2015/01/28 职场文书
护士先进个人总结
2015/02/13 职场文书
离婚案件答辩状
2015/05/22 职场文书
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
sql server 累计求和实现代码
2022/02/28 SQL Server
一条 SQL 语句执行过程
2022/03/17 MySQL