<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#clockDiv {
margin-left: 60px;
margin-bottom: 20px;
}
span {
font-size: 60px;
}
button {
width: 80px;
height: 80px;
border-radius: 40px;
border: none;
outline: none;
margin: 0 50px;
font-size: 20px;}
#record {
margin-top: 20px;
}
#record div {
border-bottom: 1px solid lightgray;
padding: 5px 0;
width: 360px;
height: 30px;
}
#record span {
font-size: 20px;
}
.spleft {
float: left;
}
.spright {
float: right;
}
</style>
</head>
<body>
<div id="clockDiv">
<span>00</span>
<span>:</span>
<span>00</span>
<span>:</span>
<span>00</span>
</div>
<div class="wrapbtn">
<button>记次</button>
<button>启动</button>
</div>
<!--显示记录的div-->
<div id="record">
<!-- <div>
<span class="spleft">第1次记录</span>
<span class="spright">00:00:00</span>
</div>-->
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
var min = 0;
var sec = 0;
var msec = 0;
var timer = null;
var count = 0;
var minstr = "";
var secstr = "";
var msecstr = "";
//1.添加事件
$(".wrapbtn button").eq(0).click(function () {
if($(this).html()==="记次") {
//检测定时器是否已经启动
if(!timer) {
alert("计时器没有开启！");
return;//结束函数后面代码的执行
}
count++;
var htmlstr = '<div>'+ '<span class="spleft">记次'+count+'</span>'
+ '<span class="spright">'+minstr+":"+secstr+":"+msecstr+'</span>'
+ '</div>';
//插入到前面
$("#record").prepend(htmlstr);
}
else {
clearClock();
}
});
$(".wrapbtn button").eq(1).click(function () {
if($(this).html()==="启动") {
$(this).html("停止");
$(this).prev().html("记次");
//开始计时
timer = setInterval(countTime,10);
}
else {
$(this).html("启动");
$(this).prev().html("复位");
clearInterval(timer);
}
});
function countTime() {
msec++;
if(msec==60) {
sec++;
msec = 0;
}
if(sec==60) {
min++;
sec = 0;
}
//保证是两位数
msec<10?msecstr="0"+msec:msecstr = msec + "";
sec<10?secstr="0"+sec:secstr = sec + "";
min<10?minstr="0"+min:minstr = min + "";
//显示时间
$("#clockDiv span").eq(0).html(minstr);
$("#clockDiv span").eq(2).html(secstr);
$("#clockDiv span").eq(4).html(msecstr);
}
function clearClock() {
min = 0;
minstr = "00";
sec = 0;
secstr = "00";
msec = 0;
msecstr = "00";
count = 0;
//清空记录 或者 .html("")
$("#record").empty();
$("#clockDiv span").eq(0).html(minstr);
$("#clockDiv span").eq(2).html(secstr);
$("#clockDiv span").eq(4).html(msecstr);
}
});
</script>
</body>
</html>
网友评论