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

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

バナーを表示するhtml
バナーを表示するJavaScript
3つの期間でバナーを切り替える

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倍イベントとかが重なってこのパターンが必要になった場面がありました！
そんなに使う場面は少ないですがいざという時に使えます！
こんな感じに追加していけばどんなパターンが来ても怖くありません！その分複雑になるので事前確認はしっかりとね！