[ajax] ヘッダに現在の日時を表示 | 中目黒webデザインとランチブログ

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

スタインベックの『エデンの東』を読み始めました、ジュンです。
雨の合間をぬって外で読んでみます。

中目黒webデザインブログ


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 type="text/javascript">
// 再帰的に実行される関数
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(){
// 処理内容
};