JavaScript：计时器 包含按钮效果设置

计时器效果：

<div><font id='timeCount' style='display:inline-block; font-size:72px;width:100px;text-align:right;'>0</font> &nbsp;&nbsp;&nbsp;//需要固定时间值的宽度，避免时间值从9变到10（以及从99变到100）时后面三张图片的位置发生变化//但是font是行内元素，无法设置宽度，所以把font变为行内块元素display:inline-block<img src='start.png' class='imgBtn' onclick="start(this)" ><img src='suspend.png' class='imgBtn' onclick="suspend(this)"><img src='stop.png' class='imgBtn' onclick="stop(this)"></div>

.imgBtn{ cursor:pointer; width:25px;height:25px;}

var timerState=2;//0-start（正在计时） 1-suspend（暂停计时） 2-stop（停止计时）var timerID;//计时器//点击开始按钮，调用该函数function start(obj){if(timerState==0) //如果当前状态为正在计时，本次点击不起作用return;else{timerState=0;//标识 正在计时changeImgBtnState(); //改变按钮的显示效果timerID=setInterval("f7()",500); //启动计时器}}function suspend(obj){if(timerState==1 || timerState==2)return; //如果当前状态为 暂停计时 或 停止计时，本次点击不起作用else{timerState=1; //标识 暂停计时changeImgBtnState(); //改变按钮的显示效果clearInterval(timerID); //清除计时器}}function stop(obj){if(timerState==2) //如果当前状态为 停止计时，本次点击不起作用return;if(timerState==0) //如果当前状态为正在计时，清除计时器clearInterval(timerID); document.getElementById('timeCount').innerHTML=0; //计时数值清零timerState=2; //标识 停止计时changeImgBtnState(); //改变按钮的显示效果}function f7(){var i=document.getElementById('timeCount').innerHTML;document.getElementById('timeCount').innerHTML=parseInt(i)+1;}function changeImgBtnState(){var imgBtn=document.getElementsByClassName('imgBtn');for(var i=0;i<3;i++){imgBtnState(imgBtn[i],timerState!=i);}}function imgBtnState(obj,flag){if(flag==false) //按钮不可用obj.style.cssText="border:1px solid black;width:15px;height:15px;padding:5px;";elseobj.style.cssText="border:0px solid black;width:25px;height:25px;padding:0px;";}