ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

時間帯によって処理を条件分岐させたい時のjQueryのサンプルコード

| カテゴリー : JavaScript

キャンペーンサイトなどで時間帯や日程によって、Webページの背景を変えたりアニメーションの動きを変えることが求められるケースがあります。

今回はそんな時に役立ちそうな、JavaScriptのDateオブジェクトを利用した条件分岐の書き方をご紹介します。サンプルではjQueryを利用していることが前提になっています。

時間帯によって処理を分岐させてみる

こちらはシンプルな条件分岐で処理を変更するコードです。

まずはDateオブジェクトを利用して現在の時間を取得し、if文の条件と照らし合わせて時間帯ごとの処理を設定しています。

上記のDate.getHours()という書き方で取得出来るのは0~23の整数値です。

サンプルではbodyの背景色を変えているだけですが、適当に処理内容を変更してもらえれば、時間帯ごとに異なる動作を実行することが可能です。

時間帯を細かく設定したい場合はif文ではなく、switch文を使った方がスマートかもしれません。

switch文ならば各時間の条件分岐をいちいち書かなくて良いので何時にどんな処理が行われるのかが見やすいですね。

もっと詳細な時刻を引数にして条件分岐を行う

書き方によってはもっと細かな時間帯を設定して条件分岐を行うことも可能です。

ここまでのサンプルではDate().getHours()を利用して0〜23までの時間だけしか取得していませんが、Dateオブジェクトは他にも月や年、分、秒など様々な時間情報が取得できます。

Date – JavaScript | MDN

次のコードは処理を変更する時間帯の複数設定をできるようにしたもので、現在時刻が条件に合っていれば任意のURLにリダイレクトする、という内容のものです。

まずは現在の時間を取得するために Dateオブジェクトを生成します。

$.each関数を利用して引数に連想配列を設定し、リダイレクトURL、開始日時、終了日時を実行する処理と紐付けます。

ちょっと複雑なのでわかりずらいかもしれませんが、よく見ていただくと$.each()に設定されている連想配列がその後のfunctionの引数になっています。

その引数を利用してif文で条件に合うかどうかを確認し、分岐を行います。条件に合うものは$.each()で設定したURLにリダイレクトされるというサンプルです。

リダイレクトではなく任意の処理にしたい場合はif文の分岐内の処理を変更してください。引数にリダイレクトURLが要らない場合は、連想配列と引数の箇所を変更してください。

以上、Dateオブジェクトを利用した条件分岐といくつかの例のご紹介でした。

ECサイトのキャンペーンやシーズンごとのイベントサイトにちょっとした仕掛けを実装したい時などに使えるかと思います。

参考ページ

JavaScriptで、例えば2月10日24時までは0210.htmlに、2月11日0時… – 人力検索はてな

[ jQuery ] ( 連想 ) 配列を引数に繰り返し処理する ( $.each 関数 )

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。