利用HTML实现秒表功能

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.a{

background-image: url(https://pic.616pic.com/ys_bnew_img/00/44/96/SrHNIPCVGH.jpg);

width: 500px;

height: 500px;

/* border: 1px solid rgb(0, 255, 157); */

position:absolute;

left: 50%;

margin-left: -400px;

text-align: center;

line-height: 100px;

}

#showTime

{

margin-top: 200px;

margin-left: 100px;

color: rgb(1, 7, 12);

text-align: center;

width: 300px;

height: 60px;

font-size: 60px;

}

#startBn{

width: 60px;

height: 30px;

/* margin-top: 300px; */

}

#restBn{

width: 60px;

height: 30px;

}

</style>

</head>

<body>

<div class="a">

<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>

相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据5 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
334554325 小时前
element动态表头合并表格
开发语言·javascript·ecmascript