jQueryで現在の時刻を判別し、表示するバナーを切り替える

jQueryで現在の時刻を判別し、表示するバナーを切り替える

楽天での話、例えばお買いものマラソンや楽天スーパーセールなどでイベントのエントリーバナーを時間になったら手動で変更すると時間を気にしなきゃいけないし、
なにより休業日から開催だと非常に困るので時間になったら自動でバナーが切り替わる方法のまとめ。(楽天GOLD必須)

jQuery関連記事

関連記事をもっとみる

バナーを表示するhtml

<div class="timesale"></div>

用意するhtmlはこれだけ!

バナーを表示するJavaScript

<script>
$(document).ready(function() {
    $(".timesale").each(function(index, target) {
        var startDate = '2016/2/7 20:00'; //1
        var endDate = "2016/2/12 1:59";   //2
        var nowDate = new Date();

    if (startDate) {
        startDate = new Date(startDate);
    } else {
        startDate = nowDate;
    }
    
    if (endDate) {endDate = new Date(endDate);}

    //イベント前
    if (startDate >= nowDate) { 
      $(this).html('<a href="http://xxx"><img src="sample1.jpg"></a>');
    }

    //イベント開催中1-2
    if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
      $(this).html('<a href="http://xxx"><img src="sample2.jpg"></a>');
    }

    //イベント終了後-2
    if ((!endDate || nowDate >= endDate)) {
      $(this).html('<a href="http://xxx"><img src="sample3.jpg"></a>');
    }

    });
});
</script>

まず、divを用意し、jsとクラス名を合わせる。この中のhtmlを時間によって変更していく仕組み。startDateにイベント開始日時を、endDateにイベント終了日時を設定する。
これらを設定すると、

  • startDateで指定した時間より前の場合
  • startDateとendDateで指定した時間の間の場合
  • endDateで指定した時間より後の場合

の設定ができる。
使わないパターンは/**/でコメントアウトするとその機能が動かないので自由度が高いです!便利!

3つの期間でバナーを切り替える

<script>
$(document).ready(function() {
    $(".timesale").each(function(index, target) {
        var startDate = '2016/2/7 20:00'; //1
        var endDate = "2016/2/12 1:59";   //2
        var thirdDate = "2016/2/14 1:59"; //3
        var nowDate = new Date();

    if (startDate) {
        startDate = new Date(startDate);
    } else {
        startDate = nowDate;
    }
    
    if (endDate) {endDate = new Date(endDate);}
    if (thirdDate) {thirdDate = new Date(thirdDate);}

    //イベント前
    if (startDate >= nowDate) { 
      $(this).html('<a href="http://xxx"><img src="sample1.jpg"></a>');
    }

    //イベント開催中1-2
    if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
      $(this).html('<a href="http://xxx"><img src="sample2.jpg"></a>');
    }

	//イベント開催中2-3
    if (endDate <= nowDate && (!thirdDate || nowDate <= thirdDate)) {
      $(this).html('<a href="http://xxx"><img src="sample3.jpg"></a>');
    }

    //イベント終了後3-
    if ((!thirdDate || nowDate >= thirdDate)) {
      $(this).html('<a href="http://xxx"><img src="sample3.jpg"></a>');
    }

    });
});
</script>

これはその1のソースにもう一区切り追加したパターンです。前に1回だけポイント10倍イベントとかが重なってこのパターンが必要になった場面がありました!
そんなに使う場面は少ないですがいざという時に使えます!
こんな感じに追加していけばどんなパターンが来ても怖くありません!その分複雑になるので事前確認はしっかりとね!

  • startDateで指定した時間より前の場合
  • startDateとendDateで指定した時間の間の場合
  • endDateとthirdDateで指定した時間の間の場合
  • endDateで指定した時間より後の場合

jsで作ってあるので動作確認はPCの本体時間を変更すればできます!
未来日で時間を変更したままjsなどを書き換えると更新時間も未来日で変更されちゃうので注意してね!

コメント

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