キャンペーンサイトなどで時間帯や日程によって、Webページの背景を変えたりアニメーションの動きを変えることが求められるケースがあります。
今回はそんな時に役立ちそうな、JavaScriptのDateオブジェクトを利用した条件分岐の書き方をご紹介します。サンプルではjQueryを利用していることが前提になっています。
時間帯によって処理を分岐させてみる
こちらはシンプルな条件分岐で処理を変更するコードです。
1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ var now_hour = new Date().getHours(); if ( 0 <= now_hour && now_hour <= 6 ){ $('body').css('background','red'); } else if ( 7 <= now_hour && now_hour <= 12 ) { $('body').css('background','blue'); } else if ( 13 <= now_hour && now_hour <= 17) { $('body').css('background','green'); } else if ( 18 <= now_hour && now_hour <= 23) { $('body').css('background','yellow'); } }); |
まずはDateオブジェクトを利用して現在の時間を取得し、if文の条件と照らし合わせて時間帯ごとの処理を設定しています。
上記のDate.getHours()という書き方で取得出来るのは0~23の整数値です。
サンプルではbodyの背景色を変えているだけですが、適当に処理内容を変更してもらえれば、時間帯ごとに異なる動作を実行することが可能です。
時間帯を細かく設定したい場合はif文ではなく、switch文を使った方がスマートかもしれません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | $(function(){ var now_hour = new Date().getHours(); switch (now_hour) { case 1: // ケース1での処理 $('body').css('background','red'); break; case 2: // ケース2での処理 $('body').css('background','red'); break; case 3: // ケース3での処理 $('body').css('background','red'); break; // 以下case 4, case 5と書いていく... default: // デフォルトの処理 $('body').css('background','red'); break; } }); |
switch文ならば各時間の条件分岐をいちいち書かなくて良いので何時にどんな処理が行われるのかが見やすいですね。
もっと詳細な時刻を引数にして条件分岐を行う
書き方によってはもっと細かな時間帯を設定して条件分岐を行うことも可能です。
ここまでのサンプルではDate().getHours()を利用して0〜23までの時間だけしか取得していませんが、Dateオブジェクトは他にも月や年、分、秒など様々な時間情報が取得できます。
次のコードは処理を変更する時間帯の複数設定をできるようにしたもので、現在時刻が条件に合っていれば任意のURLにリダイレクトする、という内容のものです。
1 2 3 4 5 6 7 8 9 10 11 12 | var now_date = new Date(); $.each({ 'index_01.html':['2016/3/15','2016/3/16 23:59:59'], 'index_02.html':['2016/3/16 00:00:00','2016/3/17 23:59:59'], },function(redirect_url,date_time){ if(new Date(date_time[0]) <= now_date && now_date <= new Date(date_time[1])){ //対象日時の場合 document.location.href = redirect_url; } else { //対象日時外の処理をここに書く } }); |
まずは現在の時間を取得するために Dateオブジェクトを生成します。
$.each関数を利用して引数に連想配列を設定し、リダイレクトURL、開始日時、終了日時を実行する処理と紐付けます。
ちょっと複雑なのでわかりずらいかもしれませんが、よく見ていただくと$.each()に設定されている連想配列がその後のfunctionの引数になっています。
その引数を利用してif文で条件に合うかどうかを確認し、分岐を行います。条件に合うものは$.each()で設定したURLにリダイレクトされるというサンプルです。
リダイレクトではなく任意の処理にしたい場合はif文の分岐内の処理を変更してください。引数にリダイレクトURLが要らない場合は、連想配列と引数の箇所を変更してください。
以上、Dateオブジェクトを利用した条件分岐といくつかの例のご紹介でした。
ECサイトのキャンペーンやシーズンごとのイベントサイトにちょっとした仕掛けを実装したい時などに使えるかと思います。
参考ページ
