時間で表示を切り替えるプログラムを紹介します【JavaScript】

営業中、営業時間外を手動で切り替えるのが手間で何とかしてほしいです

こうした悩みを解決します。

記事の内容

・プログラムの紹介

プログラムの紹介

はじめにプログラムを示します。

See the Pen vYxbzep by Hidenori Himeno (@hidenori-himeno) on CodePen.

HTML部はdivクラスでidを設けただけです。これだけだと何も表示しないです(試しにJS部を消すとよいでしょう)。

JS部では現在の時間を取得して、参照したidにテキストを入れてます。
dというdate型変数を宣言して現在時刻を取得、その変数に対してgethours()で時刻だけを抜き出してhourという変数に格納しています。

そのhourに対して10~16時の7時間は”営業中”、それ以外は”営業終了しました”と表示するようにしています。

何か分からないことあれば問合せ下さいませ。

まとめ

Date.gethours()で時間を取得して、if文で時間によってinnerHTMLを書き換えてやるとその時々で自動表示切替プログラムの完成です。

私ホームページ制作やっているんですけど、これはけっこう便利そうなので自分でさらに改良して使おうと思います。