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 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
window.location.hash知识汇总
Nov 09 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 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编程中八种常见的文件操作方式
2006/11/19 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
药剂专业毕业生求职信
2014/06/24 职场文书
真诚的求职信
2014/07/04 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
爱牙日活动总结
2014/08/29 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
公司行政管理制度范本
2015/08/05 职场文书
初中思品教学反思
2016/02/20 职场文书
python 实现定时任务的四种方式
2021/04/01 Python