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

计时器效果: 

详解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;\";
	else
		obj.style.cssText=\"border:0px solid black;width:25px;height:25px;padding:0px;\";
}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容