js实现简单的秒表


Posted in Javascript onJanuary 16, 2020

本文实例为大家分享了js实现简单的秒表具体代码,供大家参考,具体内容如下

描述:

实现一个简单的秒表,点击启动按钮时开始计时,随后启动按钮变为暂停,

点击暂停暂停计时,点击复位回到最初始状态。

效果:

js实现简单的秒表

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 #showTime
 {
  width: 300px;
  height: 60px;
  font-size: 60px;
  line-height: 60px;
 }
 </style>
</head>
<body>
 <div>
 <div id="showTime">00:00:00</div>
 <button id="startBn">启动</button>
 <button id="restBn">复位</button>
 </div>
<script>
 //——————
 var time,showTime,startBn,restBn,pauseDate;
 //布尔开关
 var bool=false;
 //暂停的累计时间
 var pauseTime=0;
 
 init();
 function init() {
 showTime=document.getElementById("showTime");
 startBn=document.getElementById("startBn");
 restBn=document.getElementById("restBn");
 startBn.addEventListener("click",clickHandler);//开始按钮 ~ 暂停按钮
 restBn.addEventListener("click",clickHandler);//复位按钮
 setInterval(animation,16);
 }
 
 //转化时间函数
 function animation() {
 if(!bool) return;
 //前时间减去上次开启时间减去暂停累计时间
 var times=new Date().getTime()-time-pauseTime;
 var minutes=Math.floor(times/60000);//毫秒转化为分钟
 var seconds=Math.floor((times-minutes*60000)/1000);//已知分钟 
 将time减去分钟 除去1000得出 秒
 var ms=Math.floor((times-minutes*60000-seconds*1000)/10);//
 showTime.innerHTML=
  (minutes<10 ? "0" +minutes : minutes)+":"
  +(seconds<10 ? "0"+seconds :seconds)+":"
 +(ms<10 ? "0"+ms : ms);
 }
 
 //点击时的事件
 function clickHandler(e) {
 e= e || window.event;
 if(this===startBn){
  bool=!bool;
  if(bool){
  this.innerHTML="暂停";
  //如果我们上一次暂停时间是空,表示没有暂停过,因此,直接返回0
  //如果上次的暂停时间是有值得,用当前毫秒数减去上次的毫秒数,这样就会得到暂停时间
  pauseTime+=(!pauseDate ? 0 : new Date().getTime()-pauseDate);
  if(time) return;
  time=new Date().getTime();
  return;//是为bool判断跳出
  }
 
  this.innerHTML="启动";
  pauseDate=new Date().getTime();
  return;//是为this是否等于startBn判断跳出
 }
 startBn.innerHTML="启动";
 pauseTime=0;
 pauseDate=null;
 bool=false;
 time=0;
 showTime.innerHTML="00:00:00";
 }
 
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
js脚本实现数据去重
Nov 27 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
js中Object.create实例用法详解
Oct 05 Javascript
JS 数组基本用法入门示例解析
Jan 16 #Javascript
js实现上下左右键盘控制div移动
Jan 16 #Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 #Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 #jQuery
js实现点击生成随机div
Jan 16 #Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 #Javascript
JS实现可视化音频效果的实例代码
Jan 16 #Javascript
You might like
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
Python中字典映射类型的学习教程
2015/08/20 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
python三方库之requests的快速上手
2019/03/04 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
python实现简单俄罗斯方块
2020/03/13 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
python opencv实现简易画图板
2020/08/27 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
本科生个人求职自荐信
2013/09/26 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
2014年质量工作总结
2014/11/22 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android