menu
menu

jQueryで日時を表示【実践でjQuery入門】 | Webデザインラボ

キーワード検索

12月のアクセストップ10

  1. ( 2↑) CSSだけでドロップダウンメニュー
  2. ( 1↓) スマホサイトの作成・基本編
  3. ( 3-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 7↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  6. ( 5↓) jQueryでドロップダウンメニュー
  7. (10↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 6↓) スマホ・タブレット・PCの振り分けいろいろ
  9. ( 8↓) Windows 10にApache2.4 VC11をインストール
  10. ( -↑) jQueryで日時を表示【実践でjQuery入門】
  • facebook11
  • はてなブックマーク5
  • Google+1
  • Pocket0
  • Twitter0

jQueryで日時を表示【実践でjQuery入門】

  • Guide

jQuery

こんにちは(・∀・)

三回に渡って行われたWebデザイナー向けjQuery超簡単入門講座も終わり、今回からは実践でjQuery入門が始まります。まだまだ覚えることはたくさんあり、前三回の超入門で聞いたこともないようなメソッドや文法的なことも出てきますが、まずは「習うより慣れよ」ということで、「そうするとそうなるのかー」的な感じで覚えていってください。「なんで?」、「どうしてそうなる?」というような疑問は学習において大切なことですが、そこで立ち止まってしまうと中々前に進みませんので、ここではそれらは置いておいて、とりあえず先に進んでみましょう。英語学習における文法と会話みたいな関係と同じような感じですね。


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


jQuery入門の目次はこちら

new Date()

1. 現在日時を表示

jQueryで日時を表示するにはnew Date()を使えば簡単に現在日時を表示することができます。.text()メソッドにパラメータnew Date()で現在日時を表示させてみます。

サンプルデモ

HTML

<p class="demo1"></p>
JavaScript

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

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

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

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

サンプルデモ

HTML

<p class="demo2"></p>
JavaScript

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

秒数が変わっていることがわかります。setInterval(function(){}, 1000);を使うと一定の時間ごとに特定の処理を繰り返します。この場合、現在日時を1000ミリ秒ごとに繰り返して表示しております。


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

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

jQueryで日時を表示するにはnew Date()を使えば簡単に現在日時を表示することができます。今度はその日時の必要な部分だけ抜き出して表示させます。それには変数という仕組みを使います。変数については次回解説しますが、簡単に言うとあるデータを任意の名前で作った箱に入れて使いまわすという仕組みです。例えば、今回使っているnew Data()ですが、これをvar nowという名前の箱を作ってそれに入れてあちこちで使いまわすという方法です。ここではサンプルを見てなんとなく「そんな仕組みがあるのかー」ぐらいの理解をしていただければ大丈夫です。変数を宣言する【jQuery入門】

サンプルデモ

HTML

<p class="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] + ")");
});

new Date()がnowという変数の箱に入りました。それ以外の日時を抽出するための呪文もそれぞれ変数の箱に入れてあります。wという箱には曜日が入るのですが、ここには実際に曜日が入っているわけではなく0から6の数字(0:日曜日、1:月曜日~)が入っており、その数字を曜日に割り当てるための箱、wdという箱を作り、曜日が自動的に繰り返して表示される仕組み(配列)を作って曜日を表示させています。


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


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

  .getFullYear()

  .getMonth() + 1

  .getDate()

曜日 .getDay()

  .getHours()

  .getMinutes()

  .getSeconds()

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

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

サンプルデモ

HTML

<p class="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);
});

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

5. 桁数を揃える

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

サンプルデモ

HTML

<p class="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);
});

太字になっている部分が今回追加変更した箇所です。最初に定義した変数から数値を足したり引いたりして桁を揃えています。その桁が揃った変数でさらに新しい変数を作って.text()メソッドに挿入しています。箱に入れた物に変化を加えてさらに別の箱に入れてそれを使用するといった感じになります。


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

サンプルデモ

HTML

<p class="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);
});

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


いかがでしたでしょうか。日時の表示に関しては以上です。それ程難しくありませんね。この調子でjQueryをマスターしていきましょう。次は何をしましょうか。


関連リンク

jQuery入門目次

  • カテゴリー:Guide
  • facebook11
  • はてなブックマーク5
  • Google+1
  • Pocket0
  • Twitter0