之前做过电商网站倒计时的效果，今天在倒计时的基础上，把代码修改了一下，改为计时器效果，实现了以下功能：
1.点击“开始”后，按秒计时且“开始”文字变为“停止”；
2.点击“停止”，计时停止，文字变为“开始”；
3.再点击“开始”，计时器从0开始重新计时。
效果如图所示：
“开始”和“停止”使用div标记实现，利用innerHTML改变其中的文字内容。
<div class="startTime">开始</div> <!-- 单击开始，再单击停止 -->
<div class="dispTime"></div> <!-- 显示计时器的部分 -->
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计时器</title>
<style type="text/css">
.startTime {
cursor: pointer;
font-size: 30px;
border: 1px solid #ccc;
border-radius: 10px;
width: 120px;
margin: 10px auto;
text-align: center;
}
.startTime:hover{
background-color: aliceblue;
}
.dispTime {
position: absolute;
font-size: 60px;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
color:red;
}
</style>
</head>
<body>
<div class="startTime">开始</div> <!-- 单击开始，再单击停止 -->
<div class="dispTime"></div> <!-- 显示计时器的部分 -->
<script>
var startTime = document.querySelector('.startTime');
var dispTime = document.querySelector('.dispTime');
var times =0; //全局变量，从0开始计时，初始值为0
var timer = null; //全局变量,初始值为空
startTime.addEventListener('click', function(){
if(this.innerHTML=='开始'){
times = 0; //清除之前的时间，从0开始重新 计时
timer = setInterval(countTime, 1000); //开启定时器，前面不能加关键字var ,那会变成局部变量，定时器不能清除，不会从0开始
this.innerHTML='停止'; //文本设置为停止
}
else{
clearInterval(timer); //停止定时器
this.innerHTML='开始'; //文本设置为开始
}
});
//countTime()函数把总秒数显示为时、分、秒效果
function countTime() {
var hh = parseInt(times / 60 / 60 );
hh = hh < 10 ? '0' + hh : hh;
var mm = parseInt(times / 60 % 60);
mm = mm < 10 ? '0' + mm : mm;
var ss = parseInt(times % 60);
ss = ss < 10 ? '0' + ss : ss;
dispTime.innerHTML= hh + ':' + mm + ':' + ss;
times++;
}
</script>
</body>
</html>
在这段代码中，刚开始实现的时候，没有把timer设置为全局变量，而是在函数中使用了var关键字，这样timer是局部变量，结果定时器无法停止。后来去掉关键字var，timer成为全局变量好了，于是最后把timer放在函数外，直接定义为全局变量，这样程序可读性好一些。
var timer = setInterval(countTime, 1000);
扫一扫
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
