【Javascript】年・月・日・時・分・秒を取り出す方法

Javascriptを使って現在日時をそれぞれ書き出してみます。

現在の時間を細かく取得

1行で終わるほど簡単です。

var now = new Date();

終わりです。

このままいくとタイトル詐欺になるので、実験的に書き出してみます。

[HTML]

<p id="timeexample">ここに書き出す</p>

[JavaScript]

var now =new Date();
document.getElementById('timeexample').textContent = now;

ブラウザがページを読み込んだ(このページを開いた)時点での時刻を取得します。

年～秒まで単位ごとで取得

先程の状態でもたしかに出来ているんですが、正直扱いづらい形なので普段見慣れているような形に成形をしてみましょう。

※1：『月』を取得するgetMonth();に関しては0～11の値で取得するので、実際にはgetMonth()+1;としておくと1～12でキチンと表示できるようになります。

※2：『曜日』を取得するgetDay();では日曜～土曜を0～6の数値で返します。

更に注意が必要なのは１からではなく、0から始まります。プログラミングに関しては0が開始点になるということを覚えておきましょう。

では実際にそれぞれを取得してみましょう。

[HTML]

<table>
<tr><th></th><td id="years"></td></tr>
<tr><th></th><td id="monthes"></td></tr>
<tr><th></th><td id="today"></td></tr>
<tr><th></th><td id="youbi"></td></tr>
<tr><th></th><td id="hours"></td></tr>
<tr><th></th><td id="mins"></td></tr>
<tr><th></th><td id="secs"></td></tr>
<tr><th></th><td id="msec"></td></tr>
</table>

[JS]

var now = new Date();
var years = now.getFullYear();
var monthes = now.getMonth()+1;
var today = now.getDate();
var youbi = now.getDay();
var hours = now.getHours();
var mins = now.getMinutes();
var secs = now.getSeconds();
var msec = now.getMilliseconds();

document.getElementById('years').textContent = years;
document.getElementById('monthes').textContent = monthes;
document.getElementById('today').textContent = today;
document.getElementById('youbi').textContent = youbi;
document.getElementById('hours').textContent = hours;
document.getElementById('mins').textContent = mins;
document.getElementById('secs').textContent = secs;
document.getElementById('msec').textContent = msec;

全部うまく取得できました。しかし、曜日がこのままでは数字だけ表示されて何のことかよくわからないので『日』～『土』の形に置き換えてみましょう。

配列を使って曜日を取得

曜日を数字から対応する文字に置き換えるのに今回は『配列』を使って対応していきます。実際に見てみます。

[JavaScript]

var now = new Date();
var years = now.getFullYear();
var monthes = now.getMonth()+1;
var today = now.getDate();
var youbi = now.getDay();
var hours = now.getHours();
var mins = now.getMinutes();
var secs = now.getSeconds();
var msec = now.getMilliseconds();

//下の1行を追加
var weekday = ["日","月","火","水","木","金","土"];

//曜日の書き換えを変数youbiから変数weekdayに置き換える
document.getElementById('years').textContent = years;
document.getElementById('monthes').textContent = monthes;
document.getElementById('today').textContent = today;
document.getElementById('youbi').textContent = weekday[youbi];
document.getElementById('hours').textContent = hours;
document.getElementById('mins').textContent = mins;
document.getElementById('secs').textContent = secs;
document.getElementById('msec').textContent = msec;

追加した1行の部分が配列というもので、今回は曜日を日～土を漢字で用意しています。,(カンマ)で区切って値の数が7つあって、配列も0から順番に番号が振られています。

例：”日”=0,”月”=1・・・”土”=6

今回で言ってしまえば、変数youbiで0～6で曜日の番号を取得しているので、その『値』番目にくる配列の文字を表示させているという形になります。

今日で言ってしまえば、

var weekday= [
"日", //0番目
"月", //1番目
"火", //2番目
"水", //3番目
"木", //4番目
"金", //5番目
"土"  //6番目
];

変数weekdayに配列である[“日”,”月”,”火”,”水”,”木”,”金”,”土”]を入れておき、変数youbiで0～6番目となるので

これで[“日”,”月”,”火”,”水”,”木”,”金”,”土”]のyoubi番目と指定している事になります。

配列はよく使うので、この曜日取得方法でしっかりと意味を理解しておきましょう。

日付や時刻の取得はあらゆる場面で使えるものなので、わからない部分はしっかりとおさらいしておきましょう。