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 相关文章推荐
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
mpvue将vue项目转换为小程序
Sep 30 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
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编译安装php-amq扩展简明教程
2016/06/25 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Python max内置函数详细介绍
2016/11/17 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
司机检讨书
2014/02/13 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
面试通知单大全
2015/04/20 职场文书
黑白记忆观后感
2015/06/18 职场文书
小学班长竞选稿
2015/11/20 职场文书
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis