详解JavaScript的计时器和按钮效果设置详解JavaScript的计时器和按钮效

计时器效果：

文章图片

0 //需要固定时间值的宽度，避免时间值从9变到10（以及从99变到100）时后面三张图片的位置发生变化//但是font是行内元素，无法设置宽度，所以把font变为行内块元素display:inline-block

.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; "; }

总结 【详解JavaScript的计时器和按钮效果设置】本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!