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 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
一个网马的tips实现分析
Nov 28 Javascript
javascript中的this详解
Dec 08 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
js模块加载方式浅析
Aug 12 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 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
一个多文件上传的例子(原创)
2006/10/09 PHP
smtp邮件发送一例
2006/10/09 PHP
php生成随机密码的几种方法
2011/01/17 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
php获取微信openid方法总结
2019/10/10 PHP
PHP 裁剪图片
2021/03/09 PHP
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
Vue组件开发初探
2017/02/14 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
python实现超级玛丽游戏
2020/03/18 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
C/C++程序员常见面试题一
2012/12/08 面试题
《学会合作》教学反思
2014/04/12 职场文书
以权谋私检举信范文
2015/03/02 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
2015年消防工作总结
2015/04/24 职场文书
八年级作文之友情
2019/11/25 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
mysq启动失败问题及场景分析
2021/07/15 MySQL
python数字类型和占位符详情
2022/03/13 Python