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 相关文章推荐
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
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
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
jQuery链使用指南
2015/01/20 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
python中os模块详解
2016/10/14 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
python中添加模块导入路径的方法
2021/02/03 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
医院护士求职自荐信格式
2013/09/21 职场文书
商场中秋节广播稿
2014/01/17 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
银行贷款收入证明
2014/10/17 职场文书
高一作文之乐趣
2019/11/21 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
对讲机的最大通讯距离是多少
2022/02/18 无线电
Oracle用户管理及赋权
2022/04/24 Oracle