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学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
antd table按表格里的日期去排序操作
Nov 17 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学习笔记 类的声明与对象实例化
2011/06/13 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
splice slice区别
2006/10/09 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
ECMAScript6--解构
2017/03/30 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
Python实现字典的key和values的交换
2015/08/04 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
详解小白之KMP算法及python实现
2019/04/04 Python
python实现爬山算法的思路详解
2019/04/09 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
校本教研工作制度
2014/01/22 职场文书
人力资源主管职责范本
2014/03/05 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL
SQL Server Agent 服务无法启动
2022/04/20 SQL Server
Android存储中最基本的文件存储方式
2022/04/30 Java/Android