【JavaScript】入門11. JavaScriptで日時を表示

こんにちは（・∀・）

以前jQuery入門講座でもやりましたjQueryで日時を表示させる方法ですが、JavaScript入門でもやってみたいと思います。

jQuery版はこちらの【jQuery】入門5. jQueryで日時を表示をご覧ください。

1. 現在日時を表示

JavaScriptで現在日時を表示させてみます。

HTML

<p id="demo1"></p>

JavaScript

var now = new Date();
target = document.getElementById('demo1');
target.innerHTML = now;

Result

空のp要素#demo1にnew Date()で現在日時を表示させております。

2. 現在日時をリアルタイムで表示

new Date()を使って現在日時を表示することができました。今度はsetInterval();を使ってリアルタイムで現在日時を表示できるようにしてみます。

HTML

<p id="demo2"></p>

JavaScript

function realtime(){
var now = new Date();
target = document.getElementById('demo2');
target.innerHTML = now;
}
setInterval('realtime()',1000);

Result

秒数が変わっていることがわかります。setInterval関数を使うと一定の時間ごとに特定の処理を繰り返します。

この場合、現在日時を1000ミリ秒ごとに繰り返して表示しております。繰り返さず1度だけ処理をしたい場合はsetTimeout関数を使用します。

JavaScriptのタイマー系の関数はこのsetInterval関数とsetTimeout関数の2種類がありますが詳しくはまた別の機会に解説したいと思います。

ただしこれだと使いようがありません。表示されている中から必要な物(月・日・時間等)を抜いて書き直す必要があります。

3. 必要なデータだけ抜き出して表示

JavaScriptで日時を表示するにはnew Date()を使えば簡単に現在日時を表示することができます。

今度はその日時の必要な部分だけ抜き出して表示させます。それには変数という仕組みを使います。変数については以前こちらの【JavaScript】入門3. 変数を宣言するで解説しましたが、覚えていらっしゃいますか⁉️

復習になりますが、あるデータを任意の名前で作った箱に入れて使いまわすという仕組みです。

例えば、今回使っているnew Data()ですが、これをvar nowという名前の箱を作ってそれに入れてあちこちで使いまわすという方法です。

ここではサンプルを見てなんとなく「そんな仕組みがあるのかー」ぐらいの理解をしていただければ大丈夫です。

HTML

<p id="demo3"></p>

JavaScript

var now = new Date();
var y = now.getFullYear();
var m = now.getMonth() + 1;
var d = now.getDate();
var w = now.getDay();
var wd = ['日', '月', '火', '水', '木', '金', '土'];
var h = now.getHours();
var mi = now.getMinutes();
var s = now.getSeconds();
target = document.getElementById('demo3');
target.innerHTML = y + '年' + m + '月' + d + '日' + h + '時' + mi + '分' + s + '秒' + '(' + wd[w] + ')';

Result

new Date()がnowという変数の箱に入りました。

それ以外の日時を抽出するための呪文もそれぞれ変数の箱に入れてあります。

wという箱には曜日が入るのですが、ここには実際に曜日が入っているわけではなく0から6の数字(0：日曜日、1：月曜日～)が入っており、その数字を曜日に割り当てるための箱、wdという箱を作り、曜日が自動的に繰り返して表示される仕組み(配列)を作って曜日を表示させています。

.innerHTMLで変数や文字列を文字列として繋ぐのに「+」の記号(演算子)を使って繋いでいきます。
例：.innerHTML=y + '年';

今回、年月日曜日時分秒を取得したメソッド。

年　　.getFullYear()
月　　.getMonth() + 1
日　　.getDate()
曜日　.getDay()
時　　.getHours()
分　　.getMinutes()
秒　　.getSeconds()

4. 抜き出したデータをリアルタイムで表示する

抜き出したデータをリアルタイムで表示させます。それには前に使ったsetInterval();でリアルタイムで現在日時を表示できるようにしてみます。

HTML

<p id="demo4"></p>

JavaScript

function realtime2() {
var now = new Date();
var y = now.getFullYear();
var m = now.getMonth() + 1;
var d = now.getDate();
var w = now.getDay();
var wd = ['日', '月', '火', '水', '木', '金', '土'];
var h = now.getHours();
var mi = now.getMinutes();
var s = now.getSeconds();
target = document.getElementById('demo4');
target.innerHTML = y + '年' + m + '月' + d + '日' + h + '時' + mi + '分' + s + '秒' + '(' + wd[w] + ')';
}
setInterval('realtime2()',1000);

Result

抜き出したデータの秒数が変わっていることがわかります。setInterval(function(){}, 1000);を使って現在日時を1000ミリ秒ごとに繰り返して表示しております。

5. 桁数を揃える

表示された数字を見ていただければわかると思いますが、一桁だったり二桁だったりしています(年号を除いて)。

それを01とか02というようにサンプル1・サンプル2のように二桁に統一したい場合は次のようにします。

HTML

<p id="demo5"></p>

JavaScript

function ddigit(num) {
var dd;
if( num < 10 ) {
dd = '0' + num;
}else{
dd = num;
}
return dd;
}
function realtime3() {
var now = new Date();
var y = now.getFullYear();
var m = ddigit(now.getMonth() + 1);
var d = ddigit(now.getDate());
var w = now.getDay();
var wd = ['日', '月', '火', '水', '木', '金', '土'];
var h = ddigit(now.getHours());
var mi = ddigit(now.getMinutes());
var s = ddigit(now.getSeconds());
target = document.getElementById('demo5');
target.innerHTML = y + '年' + m + '月' + d + '日' + h + '時' + mi + '分' + s + '秒' + '(' + wd[w] + ')';
}
setInterval('realtime3()',1000);

Result

ちなみに年月日秒曜日を記号に変更したり、曜日をなくしたり、年号をなくしたりは.innerHTMLに挿入した部分で調整してください。

HTML

<p id="demo5b"></p>

JavaScript

function ddigit(num) {
var dd;
if( num < 10 ) {
dd = '0' + num;
}else{
dd = num;
}
return dd;
}
function realtime4() {
var now = new Date();
var y = now.getFullYear();
var m = ddigit(now.getMonth() + 1);
var d = ddigit(now.getDate());
var w = now.getDay();
var wd = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var h = ddigit(now.getHours());
var mi = ddigit(now.getMinutes());
var s = ddigit(now.getSeconds());
target = document.getElementById('demo5b');
target.innerHTML =  wd[w]+ '  ' + m + '/' + d + '/' + y + '  ' +  h + ':' + mi + ':' + s;
}
setInterval('realtime4()',1000);

Result

.innerHTMLのパラメータで表示したい情報を調整します。日時の表示に関しては以上になりますがいかがでしたでしょうか、それ程難しくありませんね。

この調子でJavaScriptをマスターしていきましょう。

関連リンク

【jQuery】入門5. jQueryで日時を表示
JavaScript入門
jQuery入門