PR

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

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

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

立プロ

新卒でメーカーに入り、10年間組み込みの現場で設計を行う。
今は個人事業主として自作の組み込み機器開発や、エージェント様に紹介いただき業務委託を行っています。
C,C#,JavaScript, Vue, PHP, VBA, GAS, Kotlinなど、扱う言語が増えゆく日々。

立プロをフォローする

プログラムの紹介

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

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

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


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

タイトルとURLをコピーしました