Detailed explanation of JavaScript timer and button effect settings

 <div>
    <font id='timeCount' style='display:inline-block; font-size:72px;width:100px;text-align:right;'>0</font> &nbsp;&nbsp;&nbsp;
    //The width of the time value needs to be fixed to avoid the position of the next three pictures changing when the time value changes from 9 to 10 (and from 99 to 100). //However, font is an inline element and its width cannot be set, so font is changed to an inline block element 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 (timing in progress) 1-suspend (pause timing) 2-stop (stop timing)
var timerID; //Timer //Click the start button to call the function function start(obj){
	if(timerState==0) //If the current state is timing, this click will not work return;
	else
	{
		timerState=0;//The indicator is timing changeImgBtnState(); //Change the display effect of the button timerID=setInterval("f7()",500); //Start the timer }
}
function suspend(obj){
	if(timerState==1 || timerState==2)
		return; //If the current state is to pause or stop timing, this click will not work else
	{
		timerState=1; //Mark pause timing changeImgBtnState(); //Change the display effect of the button clearInterval(timerID); //Clear timer }
}
function stop(obj){
	if(timerState==2) //If the current state is to stop timing, this click will not work return;
	if(timerState==0) //If the current state is timing, clear the timer clearInterval(timerID); 
	document.getElementById('timeCount').innerHTML=0; //Reset the timer value timerState=2; //Stop the timer changeImgBtnState(); //Change the display effect of the button}
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) //The button is unavailable 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;";
}