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(){ // 処理内容 };