JavaScriptテックラボ

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

2009年7月2日

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

Comment

  1. SECRET: 0
    PASS:
    >仏の53さん
    おお!
    お久しぶりです!
    ギリギリ、完全に忘れてました(笑)。
    探してみます!

  2. SECRET: 0
    PASS:
    最近かなり日記更新されてますね!
    楽しく拝見してます。
    ギリギリの方もよろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!