JavaScriptテックラボ

[ajax] ヘッダに現在の日時を表示

Ajaxで現在の日時を表示させる仕事をしました。

<script type="text/javascript">
// 曜日名を用意
arWeek	= new Array("日","月","火","水","木","金","土");
// 現在時刻を表す日付オブジェクトを生成
dt		= new Date();
//取得した日付データを整形
myYear	= dt.getYear();
myYear	= (myYear < 2000) ? myYear+1900 : myYear;
myMonth	= dt.getMonth() + 1;
myDate	= dt.getDate();
myDay	= dt.getDay();
// IDが"box-watch-date"という要素に日付を代入
document.getElementById("box-watch-date").innerHTML
	= myYear + '.' + myMonth + '/' + myDate + '(' + arWeek[myDay] + '曜日)';
</script>
<div id="box-watch-date"></div>

上記のようなスクリプトで日付データを表示させます。
時刻はリアルタイムに変化させたいので、onloadイベントを利用することにしました。
どこかのサイトで時刻を表示させるスクリプトがあったので、それを少しだけ変更させて使わせてもらっています。

<script>
// 再帰的に実行される関数
function watchRenew(){
	var now	= new Date();
	document.getElementById("box-watch-time").innerHTML
	= d2(now.getHours())+":"+d2(now.getMinutes())+":"+d2(now.getSeconds());
	setTimeout(watchRenew,1000);
}
function d2(num){
	return (100+num+"").slice(1);
}
// onloadイベントハンドラに無名関数を代入
window.onload	= (function(old_func){
	return function(){
		if(!!old_func) old_func();
		watchRenew();
	}
})(window.onload);
</script>
<div id="box-watch-time"></div>

実際はscript要素を使わずに、外部JSファイルを読み込んでいます。
また、onloadなどのイベントハンドラをHTML中に書くのではなく、外部JSファイルに記述したかったので、次のように無名関数をonloadイベントハンドラに代入、という方法を採用しました。

window.onload = function(){
	// 処理内容
};

関連記事