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) に変わるときに次の 3 つの画像の位置が変わらないように、時間値の幅を固定する必要があります。 // ただし、フォントはインライン要素であり、幅を設定できないため、フォントはインライン ブロック要素 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{ 
    カーソル:ポインタ; 
    幅:25px;
    高さ:25px;
}

 var timerState=2; //0-開始（計時中） 1-一時停止（計時を一時停止） 2-停止（計時を停止）
var timerID; //タイマー //開始ボタンをクリックして関数を呼び出します function start(obj){
	if(timerState==0) //現在の状態がタイミングの場合、このクリックは機能しません。 return;
	それ以外
	{
		timerState=0;//インジケーターはタイミングです changeImgBtnState(); //ボタンの表示効果を変更します timerID=setInterval("f7()",500); //タイマーを開始します }
}
関数suspend(obj){
	タイマー状態==1 || タイマー状態==2の場合
		return; //現在の状態が一時停止またはタイミングの停止である場合、このクリックは機能しません。
	{
		timerState=1; //一時停止のタイミングをマーク changeImgBtnState(); //ボタンの表示効果を変更 clearInterval(timerID); //タイマーをクリア }
}
関数stop(obj){
	if(timerState==2) //現在の状態が計時を停止することである場合、このクリックは機能しません。 return;
	if(timerState==0) //現在の状態がタイミングの場合、タイマーをクリアします。clearInterval(timerID); 
	document.getElementById('timeCount').innerHTML=0; //タイマー値をリセット timerState=2; //タイマーを停止 changeImgBtnState(); //ボタンの表示効果を変更}
関数 f7()
{
	var i = document.getElementById('timeCount').innerHTML;
	document.getElementById('timeCount').innerHTML=parseInt(i)+1;
}
関数changeImgBtnState(){
	var imgBtn = document.getElementsByClassName('imgBtn');
	(var i=0;i<3;i++){
		imgBtnState(imgBtn[i], タイマー状態!=i);
	}
}
関数imgBtnState(obj,flag){
	if(flag==false) //ボタンは使用できません obj.style.cssText="border:1px solid black;width:15px;height:15px;padding:5px;";
	それ以外
		obj.style.cssText="border:0px solid black;width:25px;height:25px;padding:0px;";
}