jQueryでリアルタイムの時刻を表示する時計の作成方法!

jQueryでリアルタイムの時刻を表示する時計の作成方法をサンプルコード付きで解説します。ここではjQueryで現在時刻をテキストでリアルタイムに表示し続けるデジタル時計を作成する方法を紹介します。

コンテンツ [表示]

  1. 1jQueryでリアルタイムの時刻を表示する時計を作成したい
  2. 2jQueryでリアルタイムの時刻を表示する時計の作成方法
  3. 2.1解説
  4. 3まとめ

jQueryでリアルタイムの時刻を表示する時計を作成したい

今回はjQueryで現在時刻をテキストでリアルタイムに表示し続けるデジタル時計を作成していきましょう。

jQueryで現在時刻をテキストでリアルタイムに表示し続けるデジタル時計を作するには主に、現在時刻を格納するDateオブジェクトを作成し、Dateオブジェクトから「時」・「分」・「秒」などを取得します。

それでは次章よりサンプルコード付きで解説していきます。

Photo by cinz

jQueryでリアルタイムの時刻を表示する時計の作成方法

ではjQueryでリアルタイムの時刻を表示する時計の作成する方法について解説します。

jQueryでリアルタイムの時刻を表示する時計の作成するには、Dateオブジェクトを作成し、Dateオブジェクトから「時」・「分」・「秒」などを取得します。

上記のサンプルコードのプレビューのようにjQueryでリアルタイムの時刻を表示する時計が作成されていることが分かります。

解説

まずDateオブジェクトを作成します。

また曜日を配列にて格納します。

月はgetMonth()メソッドで取得するのですが、そのままだと前の月が表示されるので、必ず+1してください

曜日を取得するには、配列にて格納したものをgetDay()メソッドでそれぞれ取得してください。
getDay()メソッドには0~6の値が入っています。

「分」、「秒」に関しては2桁で表示されるように、前に「0」を付けています。ただそれだけだと「42」分の場合、「042」分と表示されてしまうので、下2桁が表示されるように、slice(-2)を付けています。

最後に1秒ごとに現在時間を取得するように、setInterval()メソッドを用い、第二引数に1000ミリ秒を設定しています。

まとめ

いかがでしたでしょうか?

jQueryを用いると、JavaScriptを用いるよりも短いコードで書くことができます。

ぜひここで紹介した方法を用いて、jQueryでリアルタイムの時刻を表示する時計を作成してみてください。

またJavaScriptを用いたリアルタイムの時刻を表示する時計の作成方法については、以下の記事にて解説しているので参照してください。

あわせて読みたい
JavaScriptでリアルタイムの時刻を表示する時計の作成方法!のイメージ
JavaScriptでリアルタイムの時刻を表示する時計の作成方法!
JavaScriptでリアルタイムの時刻を表示する時計の作成方法についてサンプルコード付きで解説します。ここでは実際にWEBサイトにJavaScriptを利用して現在時刻をリアルタイムに表示する時計を作成する方法を紹介します。
GeekHive採用サイト

関連記事