ＪＳ手習

						
<table>
	<tr>
		<td id="ClockFace" style="font-size:30px;">0:0:0</td>
	</tr>
	<tr style="background-color:#ffaaaa;">
		<td id="ToggleButton" style="font-size:30px;">OFF</td>
	</tr>
</table>
<script>
	var Min = 0;var Sec = 0;var dSec = 0;
//タイマー表示ための変数初期化、Min、Sec、dSecは分、秒、0.1秒

	var clock_face = document.getElementById("ClockFace");
	var toggle_button = document.getElementById("ToggleButton");
//ClockFace、ToggleButtonを取得（セレクタとして登録）

//実行ごとに表示を加算していく関数を作成する。ある部分は60進法、ある部分は１０進法。
	function amount_of_time (){
		clock_face.innerHTML = Min + ":" + Sec + ":" + dSec;
//ロードしたときは上記の初期値を代入して、０：０：０と表示。そして以下の加算関数に進む。
		if(Sec==59){
		Sec=0;Min=Min+1;
//秒における６０進法。
		} else if(dSec==9){
			Sec=Sec+1;dSec=0;
//デシ秒における１０進法。
		} else {
			dSec=dSec+1;
//繰り上がらないときはただdSecを０．１秒ごとに積み上げるだけ。
		};
	};
/*
amount_of_time関数で0.1秒ごとにclock face（時計の文字盤）を加えていく。
amount_of_time関数をToggleButtonのマウスオーバーで
中止、再開を切り替えることを意図して次の関数作成
*/

//トグルスイッチ
	var toggle = 0;
//トグル変数を宣言し初期化。
	function toGuru (){
//
	if(toggle ==0){
		toggle =1;
//まずトグルが０ならば１にしましょう。………①
	} else {
		toggle = 0;
//もし０以外ならば０としましょう。………②
	};
//ロードされた時はトグルは１になっている。
//あとは関数が実施されるごとにトグルは０、１が交互に切り替わる。
	if(toggle == 1){
		addtime = setInterval(amount_of_time, 100);//………③
//１００ミリ秒ごとにamount_of_timeを実施。その返り値をaddtimeに代入。
	} else {
		clearInterval(addtime);//………④
//トグルが０ならばaddtimeをストップさせる。
	};
	OnOff = new Array; OnOff[0] ="OFF"; OnOff[1] ="ON";
	toggle_button.innerHTML = OnOff[toggle];
//トグルを表示。
};
/*
②までトグルの切り替え、④までトグルの値によりClockFaceの加算を進めるかあるいは止めるか決める。
トグル値を1(ON),0(OFF)表示。
*/
toggle_button.addEventListener("mouseover",toGuru,false);
//エベント追加：文字盤にマウスオーバーでtoGuru関数が１回実施される。
</script>
						
					
				

						
			<div class="centering">
				<img id="new_6" style="width:60px;"> 
				<img id="new_7" style="width:60px;"> 
				<img id="new_8" style="width:60px;"> 
				<img id="new_9" style="width:60px;">
			</div>

<script>

toGGle = new Array();
timer_beta =  new Array();

function serialimg3(intervalT, event, noStart, noEnd, srcURI, kakuchoshi, imgid){
	if((noStart)&&(noEnd)&&(srcURI)&&(kakuchoshi)){
/*
arguments[1] 動作を開始あるいは終了させるイベント
*/
		var myNum = noStart;
		var myNumo = noStart;
		var myImg = [];
		var HDIMG = document.getElementById(imgid);
		toGGle[imgid] = 1;

		for(var i = noStart; i <= noEnd; i++){
			myImg[i] = document.createElement('img');
			myImg[i].src = srcURI + i + kakuchoshi;
		};

		function imgChange(){
			HDIMG.src = myImg[myNum].src;
			if(myNum < noEnd){
				myNum = myNum + 1;
			} else {
				myNum =myNumo;
			};
		};

		function toggle_change(){
			if(toGGle[imgid] == 1){
				timer_beta[imgid]  = setInterval(imgChange,intervalT);
				toGGle[imgid] = 0;
			} else if((toGGle[imgid] == 0)){
				clearInterval(timer_beta[imgid]);
				toGGle[imgid] = 1;
			};
		};

	HDIMG.addEventListener(event,toggle_change,false);

	}
};

	serialimg3(152,"mouseover",1,3,"new204000255_",".png","new_6");
	serialimg3(151,"click",1,3,"new204000255_",".png","new_7");
	serialimg3(72,"mouseover",1,7,"new255000000_",".png","new_8");
	serialimg3(71,"dblclick",1,7,"new255000000_",".png","new_9");

</script>