1時間時計(14)@アドベントカレンダー(17/11)

  • 1時間時計14

1時間時計14

はい、1時間時計の第14回になりま~す。

今回で、終了です。

それでは、続きを見ていきましょう。



function mc1bgsound_ymd(sound_str){

	var sound_obj;

	if(document.getElementById("ymdbsound1-id")){

		document.getElementById("ymdbsound1-id").src = sound_str;

	}else{

		sound_obj = document.createElement("audio");
		sound_obj.id = "ymdbsound1-id";
		sound_obj.src = sound_str;
		sound_obj.volume = 0.01;
		sound_obj.loop = "true";
		sound_obj.autoplay = "true";

		document.getElementsByTagName("body")[0].appendChild(sound_obj);

	}

}

function mc1sound_ymd(sound_str){

	var sound_obj;

	if(document.getElementById("id_ymdesound1")){

		document.getElementById("id_ymdesound1").src = sound_str;

	}else{

		sound_obj = document.createElement("audio");
		sound_obj.id = "id_ymdesound1";
		sound_obj.src = sound_str;
		sound_obj.volume = 0.1;
		sound_obj.autoplay = "true";

		document.getElementsByTagName("body")[0].appendChild(sound_obj);

	}

}


最後に、サウンドを再生するJavaScriptを書きます。

mc1bgsoundは、BGサウンドを、mc1soundは、効果音を再生します。

idが存在するかどうかを調べて、作成済みなら、srcにサウンドファイルのURLを代入、未作成なら、createElementでaudioタグを作成します。

HTMLのaudioタグは、JavaScriptで作成すると、ボリュームを指定できます。

mc1bgsoundは、loopをtrueにします。

それでは、全14回、お疲れさまでした。




にほんブログ村 小遣いブログ ポイントサイトへ FC2ランキング

1時間時計(13)@アドベントカレンダー(17/11)

  • 1時間時計13

1時間時計13

はい、1時間時計の第13回になりま~す。

それでは、続きを見ていきましょう。


function marqueclockexe_ymd(){

	var foward_int = 0;

	marqueeclockdb_obj.mqclml--;

	if(parseInt(document.getElementById(marqueeclockdb_obj.mcdisp).style.marginLeft) < marqueeclockdb_obj.maxpos){

		marqueeclockdb_obj.mqclml = -300;

		mc1sound_ymd(marqueeclockdb_obj.mcrpes);

	}

	else{

		foward_int = marqueeclockdb_obj.mqclml * -1 - 300;

		if(foward_int > 0){

			if(foward_int % 360 == 0){

				mc1sound_ymd(marqueeclockdb_obj.mcites);

			}

		}

	}


	document.getElementById(marqueeclockdb_obj.mcdisp).style.marginLeft = String(marqueeclockdb_obj.mqclml) + "px";

	marqueeclockdb_obj.mqclct = setTimeout("marqueclockexe_ymd();", marqueeclockdb_obj.mctitv);


}

ラストは、margin-leftをセットして、marqueeclockdb_obj.mqclctにmarqueclockexeのsetTimeoutを代入します。

このように、変数に代入した場合でも、setTimeoutにセットしたmarqueclockexeは実行されます。

変数に代入しておけば、clearTimeoutで重複実行を防げます。

これで、marqueclockexeは完成です。

それでは、続きは次回になります。




にほんブログ村 小遣いブログ ポイントサイトへ FC2ランキング

1時間時計(12)@アドベントカレンダー(17/11)

  • 1時間時計12

1時間時計12

はい、1時間時計の第12回になりま~す。

それでは、続きを見ていきましょう。


function marqueclockexe_ymd(){

	var foward_int = 0;

	marqueeclockdb_obj.mqclml--;

	if(parseInt(document.getElementById(marqueeclockdb_obj.mcdisp).style.marginLeft) < marqueeclockdb_obj.maxpos){

		marqueeclockdb_obj.mqclml = -300;

		mc1sound_ymd(marqueeclockdb_obj.mcrpes);

	}


	else{

		foward_int = marqueeclockdb_obj.mqclml * -1 - 300;

		if(foward_int > 0){

			if(foward_int % 360 == 0){

				mc1sound_ymd(marqueeclockdb_obj.mcites);

			}

		}

	}


	document.getElementById(marqueeclockdb_obj.mcdisp).style.marginLeft = String(marqueeclockdb_obj.mqclml) + "px";

	marqueeclockdb_obj.mqclct = setTimeout("marqueclockexe_ymd();", marqueeclockdb_obj.mctitv);

}

続いて、margin-leftの値を計算して、現在の時間から、サウンドを再生します。

計算方法は、marqueeclockdb_obj.mqclmlに-1を掛けて、初期オフセット300を引くだけです。

foward_intに代入して、360で割った余りから、現在表示中のフレーム番号がわかります。

それでは、続きは次回になります。




にほんブログ村 小遣いブログ ポイントサイトへ FC2ランキング

1時間時計(11)@アドベントカレンダー(17/11)

  • 1時間時計11

1時間時計11

はい、1時間時計の第11回になりま~す。

それでは、続きを見ていきましょう。


function marqueclockexe_ymd(){


	var foward_int = 0;

	marqueeclockdb_obj.mqclml--;

	if(parseInt(document.getElementById(marqueeclockdb_obj.mcdisp).style.marginLeft) < marqueeclockdb_obj.maxpos){

		marqueeclockdb_obj.mqclml = -300;

		mc1sound_ymd(marqueeclockdb_obj.mcrpes);

	}


	else{

		foward_int = marqueeclockdb_obj.mqclml * -1 - 300;

		if(foward_int > 0){

			if(foward_int % 360 == 0){

				mc1sound_ymd(marqueeclockdb_obj.mcites);

			}

		}

	}

	document.getElementById(marqueeclockdb_obj.mcdisp).style.marginLeft = String(marqueeclockdb_obj.mqclml) + "px";

	marqueeclockdb_obj.mqclct = setTimeout("marqueclockexe_ymd();", marqueeclockdb_obj.mctitv);

}

続いて、marqueclockexeのJavaScriptを何回かにわけて見ていきます。

まず、marqueeclockdb_obj.mqclmlに代入したmargin-leftの値を1減らします。

次に、margin-leftがmarqueeclockdb_obj.maxposを下回っていたら、marqueeclockdb_obj.mqclmlの値を初期化します。

こうしておくことで、1時間が経過すると、ループします。

それでは、続きは次回になります。




にほんブログ村 小遣いブログ ポイントサイトへ FC2ランキング

1時間時計(10)@アドベントカレンダー(17/11)

  • 1時間時計10

1時間時計10

はい、1時間時計の第10回になりま~す。

それでは、続きを見ていきましょう。



function marqueclockini_ymd(){

	clearTimeout(marqueeclockdb_obj.mqclct);

	marqueeclockdb_obj.mqclml = -300;

	marqueeclockdb_obj.mqclct = setTimeout("marqueclockexe_ymd();", marqueeclockdb_obj.mctitv);

	mc1sound_ymd(marqueeclockdb_obj.mcites);

}

if(window.addEventListener){

	window.addEventListener("load", marqueclockini_ymd, false);

}else if(window.attachEvent){

	window.attachEvent("onload", marqueclockini_ymd);

}else{

	window.onload = marqueclockini_ymd;

}


続いて、1時間時計の初期設定をするmarqueclockiniのJavaScriptを見ていきます。

まず、呼び出されても何度もsetTimeoutが実行しないように、clearTimeoutでタイマーをクリアーします。

次に、marqueeclockdb_obj.mqclmlにmargin-leftの初期値を代入します。

続いて、clearTimeout用に、marqueeclockdb_obj.mqclctに、marqueclockexeのsetTimeoutを代入します。

最後に開始音を鳴らして、完了です。

それでは、続きは次回になります。




にほんブログ村 小遣いブログ ポイントサイトへ FC2ランキング