sugulogの日記

JavaScriptと時間!様々な形で時間を表示しよう!!

スポンサードリンク

f:id:sugulog:20210213152137p:plain
こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptと時間ということで

  •  様々な形での時間表示

について簡単に解説します!!

その為このブログを読むことで、時計機能を実装することができるようになるのはもちろん、様々なパターンにも対応できるようになります。

是非最後までご愛読ください。

 

今回は、

  • 時間を表示させてみよう

  • アナログ時計を実装しよう

の順で解説していきます。

では早速、みていきましょう!!

・時間を表示させてみよう

まずはHTMLで時間の表示箇所を作成します。

f:id:sugulog:20210213190516p:plain

次にJavaScriptの記述です。

f:id:sugulog:20210213190338p:plain

time関数ではDateオブジェクトを使い時間を取得し表示しています。

getHoursは時間を0~23で取得し、getMinutesとgetSecondsは0~59でそれぞれ分と秒を取得します。

そのためそれぞれarrange関数を使い表示の仕方を整えています。

arrange関数ではそれぞれの値を引数で受け、まずはStringメソッドで数値を文字列に変換しています。

その後padStartメソッドを使い2文字未満の場合は冒頭に0を付け加えるように指定しています。

その結果、取得値が0~9の場合は00~09のように表示されるように指定しています。

後はtime関数でそれぞれの表示箇所にinnerHTMLで表示させ、requestAnimationFrameで再びtime関数を実行することで処理を繰り返しています。

繰り返すことでそれぞれの取得時間を更新し続けています。

では実際に動きを確認してみましょう!!

f:id:sugulog:20210214140346g:plain

時間が表示されているのを確認できますね。

今回ブログではGif動画で表示しているため進むのが早いですが、実際はしっかりと時間が刻まれていきます。

・アナログ時計を実装しよう

今回はsetIntervalを使い実装していきます。

まずはHTMLで時間の表示箇所を作成します。

f:id:sugulog:20210411231335p:plain

 timeでアナログ時計の形を作成し、子要素のhour、minutes、secondsでそれぞれの秒針を作成していきます。

またcenterは針の中心点を作成するための子要素です。

次にCSSでアナログ時計の形を作成します。

CSSはコメントで少し補足していますが実際に触り自分なりに作成してみてください。

f:id:sugulog:20210411232131p:plain

では最後にJavaScriptで時間を取得していきましょう。

f:id:sugulog:20210411233444p:plain

setIntervalの中でDateオブジェクトを生成しgetHours等で時間を取得しています。

またアナログ時計は円で時間を表示するため時間に対する角度を求める必要があります。

円の1周は360度なのでそれぞれの時を刻む数で割って定義しています。

最後にstyleを使いそれぞれの時間に対する角度をtransformのrotateを使い反映させていきます。

では実際に完成したアナログ時計をみてみましょう。

f:id:sugulog:20210411235610g:plain

こちらもGif動画で表示しているため進むのが早いですが、アナログ時間が表示され時を刻んでいるのが確認できますね!!

以上、今回のブログでした。

時計機能を実装することができるようになり、様々なパターンにも対応できるようになりましたか??

世界との時差を調べ現在の時間に付け加えるなどの処理を行うと世界時計なども実装できそうですね(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!