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 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
用jscript实现列出安装的软件列表
Jun 18 Javascript
jquery异步请求实例代码
Jun 21 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
原生JavaScript实现拖动校验功能
Sep 29 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
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
jQuery 浮动广告实现代码
2008/12/25 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
canvas时钟效果
2017/02/16 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
理货员的岗位职责
2013/11/23 职场文书
社团招新策划书
2014/02/04 职场文书
经营理念标语
2014/06/21 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
检讨书格式
2019/04/25 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python