JavaScriptで日時をデジタル表示 / リアルタイムと特定日時の取得設定

今日の日付と時間を表示させたい！『JavaScript』

JavaScriptで日時をデジタル表示 / リアルタイムと特定日時の取得設定

JavaScript時計サンプル

　ここでは、JavaScript デジタル＆アナログ時計サンプルの内、リアルタイムの日付時刻表示と訪問日時、画面更新(リフレッシュ)時などその時点の日時を表示する2通りのデジタル時計の具体的な作り方を見ていきましょう。

ECMA-262 Edition 5.1 / ECMAScriptベースのJavaScript文法

ECMAScript / ECMA-262 Edition 5.1ベースのJavaScript

プロトタイプベースのオブジェクト指向

オブジェクト指向 / オブジェクトと種類 / プロパティ / インスタンス

リアルタイムな日付の表示方法

timerID=setTimeout("お好きな関数名()",1000);
function お好きな関数名(){
  clearTimeout(timerID);
  weeks = new Array("日","月","火","水","木","金","土");
  today = new Date();
  y = today.getFullYear();
  m = today.getMonth() + 1;
  if(m < 10) m = "0" + m;
  d = today.getDate();
  if(d < 10) d = "0" + d;
  w = weeks[today.getDay()];

  h = today.getHours();
  if(h < 10) h = "0" + h;
  if (h == 24) h = "00";
  s = today.getMinutes();
  if(s < 10) s = "0" + s; else if(s=="60") s="00";
  sec = today.getSeconds();
  if(sec < 10) sec="0"+sec; else if(sec=="60") sec="00";

  document.form1.text1.value=(y+'/'+m+'/'+d+'('+w+') '+h+':'+s+':'+sec);
  timerID = setTimeout("お好きな関数名()",1000);
}

　現在日付時刻表示アプリケーションと訪問日時表示アプリケーションの違いは、タイマー関数・インターバル設定関数を利用するかしないかです。

　前者は1秒ごとのタイマーまたはインターバルを設定、後者は、ただ、その時、その瞬間の日時を記録するだけということです。

　よって現在日付時刻をリアルタイムで表示する為には、タイマー関数を利用します。

　ここでは、念のため、また、タイマー解除の例示の為に関数に入る前に1000ミリ秒(=1秒)ごとのタイマーをセットし、ハンドルとなるインスタンスを生成、関数に入ったところでタイマーを解除し、関数内容を実行しきったところで改めてタイマーを再セットしていますが、たいていの場合、最初のセットだけでよいでしょう。

　尚、JavaScriptのif...else文には、他の言語に見られるようなelseとifがセットになった文はなく、サンプルコード内でそれらしく見える部分は、else文の中に別途あるif文です。

非リアルタイムな日付の表示方法

　更新日時、訪問日時、ログの日付、画面リフレッシュ時...といったその時、その瞬間の日付時刻では、先のサンプルコードからタイマー関連の行を除くだけです。

<< Date系メソッド一例とデータ編集

備考

　ちなみにリアルタイム、非リアルタイムに関わらず、HTML/XHTML仕様上、scriptやstyleは、専用の外部ファイルで設定、当該HTML/XHTMLファイルの<head></head>タグ内で設定、または、<body></body>タグ内で設定することが可能となっており、外部ファイルだとそのファイルの読み込み設定をするだけでサイト全体や任意の一部ファイルで共有可能とすることができ、<head></head>タグ内に設定するとそのファイル内で共有可能かつ、<body></body>内をスッキリさせることができ、<body></body>タグ内で設定するとテキストボックスなど出力場所を指定してもよいですが、指定せずにその場に結果を出力することもできるのでアプリケーションの特性や用途、状況に応じて使い分けることができます。