详解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;";
}