JavaScriptで日時をデジタル表示 / Date系メソッド例と日付文字列編集

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

JavaScriptで日時をデジタル表示 / Date系メソッド例と日付文字列編集

JavaScript時計サンプル

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

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

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

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

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

Date系メソッド一例と結果

　下記は、Date系メソッドの一部を一覧にしたものであり、JavaScriptが有効になっていれば、下記の「現在の結果」列に今時点の日付時刻関連の文字列や数値が表示されます。

　それぞれの結果が何を意味するかについての詳細は、Dateオブジェクトを参照して頂くとして、これらの結果とは異なる日付文字列や何らかの数値が必要であれば、これらを利用して加工するとよいでしょう。

日付文字列の編集

// 必須じゃないけど変数宣言
var today, y, m, d, wday, str_wday, h, min, sec ;
// インスタンス化 
today = new Date() ;
// 西暦4桁 
y = today.getFullYear() ;
// 月、0～11を返す為、+1 
m = today.getMonth() + 1 ;
// 日
d = today.getDate() ;
// 時
h = today.getHours() ;
// 分
min = today.getMinutes() ;
// 秒
sec = today.getSeconds() ;
/*
曜日を示す 0～6 を返す getDay() を使って文字列を出力する為、Arrayオブジェクトを利用
*/
str_wday = new Array("日","月","火","水","木","金","土");
/*
Arrayインスタンス str_wday の添え字に0～6を返す getDay() を代入し、曜日文字列を取得
*/
wday = str_wday [ today.getDay() ];

　プログラムやスクリプトでは、出力書式の整形は、日常茶飯事であり、Dateオブジェクト利用における日付時刻文字列も同様です。

　前述した整形済み書式の出力以外の出力を希望する場合には、整形前の数値のみから成るより原始的な(プリミティブ)値を利用するのが一般的で中でも最も原始的な値は、 1970年01月01日 00:00:00 からの経過ミリ秒ですが、そこまで立ち戻らなくても先の通り、JavaScriptのDateオブジェクト(のprototypeオブジェクト)には、何らかの数値として4桁の西暦、年、月、日、曜日、時、分、秒、ミリ秒を取得可能な各種メソッドも用意されているので、それらを利用することでたいていの場合、事足りるでしょう。

　Dateオブジェクトには、曜日を0～6の数値として返す getDay() メソッドはありますが、曜日の文字列だけを取得するメソッドが存在しない為、この例では、Arrayオブジェクトを使って予め必要とする文字列を配列として用意しています。

　なぜ、ArrayオブジェクトかというとArrayオブジェクトも(他のプログラミング言語やスクリプトでも一般に配列の)添え字は、0 から始まるので Arrayオブジェクトの添え字として getDay() メソッドが返す値を渡せば、予め用意しておいた配列から対応する曜日文字列をそのまま取得することができるからです。

// 月と日が1桁の場合、0埋め
if(m < 10) m="0" + m;
if(d < 10) d="0" + d;
// 24時の場合、00 に設定
if (h == 24) h="00";

document.write(y+'/'+m+'/'+d+'('+wday+') '+h+' 時'+s+' 分'+sec+' 秒');

　ここで月日については、1～9月や1～9日の場合、1ケタ表示になってしまいますが、これを 0埋めして常に2桁表示にしたい場合、時間文字列に"時"、"分"、"秒"といった文字列を加えたい場合、24時を00時にしたい場合などには、if文など条件分岐を使って出力前に設定したり、出力時に文字として連結することで対応可能です。

　というわけで、ここまでの日付時刻情報の取得方法と必要に応じた加工方法で「その時点の日付時刻」を表示することが可能となります。

　さて最終段階として次は、刻々と時を刻むリアルタイム表示する方法を見ていきましょう。

<< メソッドを使う

リアルタイムと特定日時表示 >>