JavaScript的计时器和按钮效果怎么设置(javascript,开发技术)

计时器效果：

<div><fontid='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<imgsrc='start.png'class='imgBtn'onclick="start(this)"><imgsrc='suspend.png'class='imgBtn'onclick="suspend(this)"><imgsrc='stop.png'class='imgBtn'onclick="stop(this)"></div>

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

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