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

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

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

姫野秀徳

組み込みエンジニアとしてメーカー勤務10年。
第二種電工事士、基本情報技術者、Code.org認定教師。
microbitを用いた電子工作＆プログラミング教室を開校。
組み込み開発の実際を発信するyoutube活動も行う。

無料で学べる組み込み開発オンラインスクールはじめました！
https://kumicla.tatepro.com

姫野秀徳をフォローする

プログラムの紹介

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

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を書き換えてやるとその時々で自動表示切替プログラムの完成です。

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


立科プログラミングはウェブページの新規作成、機能追加、修正などの依頼を受け付けております。
まずはお気軽にご連絡いただければと思います！よろしくお願いいたします。