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 相关文章推荐
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 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代码
2011/11/27 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
使用Python写个小监控
2016/01/27 Python
python去掉空白行的多种实现代码
2018/03/19 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Windows下python3.6.4安装教程
2018/07/31 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
详解python分布式进程
2018/10/08 Python
Python os.access()用法实例
2019/02/18 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
求职个人评价范文
2014/04/09 职场文书
合作协议书范本
2014/04/17 职场文书
赡养老人协议书范本
2015/08/06 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技