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 相关文章推荐
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
vue组件name的作用小结
May 23 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
使用layui实现树形结构的方法
Sep 20 Javascript
vue点击自增和求和的实例代码
Nov 06 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常用ODBC函数集(详细)
2013/06/24 PHP
PHP常用数组函数介绍
2014/07/28 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
js中的string.format函数代码
2020/08/11 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
python框架中flask知识点总结
2018/08/17 Python
详解Python字典小结
2018/10/20 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python的collections模块真的很好用
2021/03/01 Python
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
求职简历自荐信
2013/10/20 职场文书
追悼会上的答谢词
2014/01/10 职场文书
中学教师管理制度
2014/01/14 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
Python实现对齐打印 format函数的用法
2022/04/28 Python