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

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

コンテンツ [表示]

  1. 1JavaScriptでリアルタイムの時刻を表示する時計を作成したい
  2. 2JavaScriptでリアルタイムの時刻を表示する時計の作成方法
  3. 2.1解説
  4. 2.2より簡単にJavaScriptでリアルタイムの時刻を表示する時計を作成する方法
  5. 3まとめ

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

WEBサイトにJavaScriptでリアルタイムの時刻を表示する時計を作成したいという場面を想定して、それを実現する方法について紹介します。

日付時刻を扱う時には共通して「Date」オブジェクトを利用します。

Photo bySplitShire

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

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

JavaScriptでリアルタイムの時刻を表示するには、まず現在時刻を格納するDateオブジェクトを作成し、Dateオブジェクトから「時」・「分」・「秒」を取得します。

このようにまずDateオブジェクトを作成し、DateオブジェクトからgetHours()メソッドで「時」・getMinutes()メソッドで「分」・getSeconds()メソッドで「秒」を取り出していることが分かります。

解説

Dateオブジェクトから「時」・「分」・「秒」を取り出すのみだと、静的な時計をただ表示するのみになります。

これを実際に1秒ごとに更新する時計とするために、setInterval()メソッドにて、第二引数に1000ミリ秒を渡すことによって実現させてます。

また時計を分かりやすくさせるために、2桁表示させるようにif文を用いてます。

if文の中身は、もし10以下の数字ならば「0」を前に付けるように設定することにより、2桁表示を実現させています。

より簡単にJavaScriptでリアルタイムの時刻を表示する時計を作成する方法

現在時刻を格納するDateオブジェクトを作成するまでは同じですが、DateオブジェクトからtoLocaleString("ja")を用いて、日本の時刻を取得します。

このように日本の現在時刻が表示されることが分かります。

ここではリアルタイムを常に表示させるために、requestAnimationFrame()メソッドを用いて、time()関数をループさせています。

まとめ

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

ここで紹介した方法を用いて、ぜひWEBサイトにJavaScriptを利用して現在時刻をリアルタイムに表示させてみてください。

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

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

関連記事