计时器效果:
<div> <font id=\'timeCount\' style=\'display:inline-block; font-size:72px;width:100px;text-align:right;\'>0</font> //需要固定时间值的宽度,避免时间值从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;\"; else obj.style.cssText=\"border:0px solid black;width:25px;height:25px;padding:0px;\"; }
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!
© 版权声明
THE END
暂无评论内容