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

こんにちは（・∀・）

三回に渡って行われたWebデザイナー向けjQuery超簡単入門講座も終わり、今回からは実践でjQuery入門が始まります。

まだまだ覚えることはたくさんあり、前三回の超入門で聞いたこともないようなメソッドや文法的なことも出てきますが、まずは「習うより慣れよ」ということで、「そうするとそうなるのかー」的な感じで覚えていってください。

「なんで？」、「どうしてそうなる？」というような疑問は学習において大切なことですが、そこで立ち止まってしまうと中々前に進みませんので、ここではそれらは置いておいて、とりあえず先に進んでみましょう。

英語学習における文法と会話みたいな関係と同じような感じですね。

今回はjQueryで日時を表示させる方法です。

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

Contents

1. 現在日時を表示
2. 現在日時をリアルタイムで表示
3. 必要なデータだけ抜き出して表示
4. 抜き出したデータをリアルタイムで表示する
5. 桁数を揃える

1. 現在日時を表示

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

.text()メソッドにパラメータnew Date()で現在日時を表示させてみます。

HTML

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

JavaScript

$(function(){
$('#demo1').text(new Date());
});

Result

空のp要素.demo1に.text()メソッドのパラメータnew Date()で現在日時を表示させております。

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

new Date()を使って現在日時を表示することができました。

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

HTML

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

JavaScript

$(function(){
setInterval(function(){
$('#demo2').text(new Date());
}, 1000);
});

Result

秒数が変わっていることがわかりますか⁉️

setInterval(function(){}, 1000);を使うと一定の時間ごとに特定の処理を繰り返します。

この場合、現在日時を1000ミリ秒ごとに繰り返して表示しております。

ただしこれだと使い難いです。

表示されている中から必要な物(月・日・時間等)を抜いて書き直す必要があります。

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

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

今度はその日時の必要な部分だけ抜き出して表示させます。

それには変数という仕組みを使います。

変数については次回解説しますが、簡単に言うとあるデータを任意の名前で作った箱に入れて使いまわすという仕組みです。

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

ここではサンプルを見てなんとなく「そんな仕組みがあるのかー」ぐらいの理解をしていただければ大丈夫です。【jQuery】入門6. 変数を宣言する

HTML

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

JavaScript

$(function(){
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();
$('#demo3').text(y + '年' + m + '月' + d + '日' + h + '時' + mi + '分' + s + '秒' + '(' + wd[w] + ')');
});

Result

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

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

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

.text()の中で変数や文字列を文字列として繋ぐのに「+」の記号(演算子)を使って繋いでいきます。

例：.text(y + '年')

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

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

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

抜き出したデータをリアルタイムで表示させます。

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

HTML

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

JavaScript

$(function(){
setInterval(function(){
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();
$('#demo4').text(y + '年' + m + '月' + d + '日' + h + '時' + mi + '分' + s + '秒' + '(' + wd[w] + ')');
}, 1000);
});

Result

抜き出したデータの秒数が変わっていることがわかります。

setInterval(function(){}, 1000);を使って現在日時を1000ミリ秒ごとに繰り返して表示しております。

5. 桁数を揃える

表示された数字を見ていただければわかると思いますが、一桁だったり二桁だったりしています(年号を除いて)。それを01とか02というようにサンプル1・サンプル2のように二桁に統一したい場合は次のようにします。

HTML

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

JavaScript

$(function(){
setInterval(function(){
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();
var mm = ('0' + m).slice(-2);
var dd = ('0' + d).slice(-2);
var hh = ('0' + h).slice(-2);
var mmi = ('0' + mi).slice(-2);
var ss = ('0' + s).slice(-2);
$('#demo5-1').text(y + '年' + mm + '月' + dd + '日' + hh + '時' + mmi + '分' + ss + '秒' + '(' + wd[w] + ')');
}, 1000);
});

Result

最初に定義した変数から数値を足したり引いたりして桁を揃えています。その桁が揃った変数でさらに新しい変数を作って.text()メソッドに挿入しています。

箱に入れた物に変化を加えてさらに別の箱に入れてそれを使用するといった感じになります。

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

HTML

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

JavaScript

$(function(){
var now = new Date();
var y = now.getFullYear();
var m = now.getMonth() + 1;
var d = now.getDate();
var mm = ('0' + m).slice(-2);
var dd = ('0' + d).slice(-2);
$('#demo5-2').text(y + '/' + mm + '/' + dd);
});

Result

.text()メソッドのパラメータで表示したい情報を調整します。

いかがでしたでしょうか、日時の表示に関しては以上になりますがそれ程難しくありませんね。

この調子でjQueryをマスターしていきましょう、次は何をしましょう。

関連リンク

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