JavaScript实现的计时器效果
之前做过电商网站倒计时的效果，今天在倒计时的基础上，把代码修改了一下，改为计时器效果，实现了以下功能：
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开始计时，初始值为0var 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);