【jQuery】期間を限定、指定する3種類の表示方法

あらかじめhtmlで組んでおいて、キャンペーン期間のみこのバナーを表示したい。
そのようなことがWEBサイト、特にECサイトなどでは良くある出来事です。

そんな時には使って便利なjqueryの出番です。

ここでは、jqueryを使った時期や期間を限定した表示の切り替えをご紹介します。

テキストの指定期間表示

まずはキャンペーン期間、に限りませんが指定した期間にのみ表示をしたいテキストがあるとします。
例えば、夏期休業や年末年始休業などです。

以下の文章を指定期間で表示してみます。
（今がチャンス！全品25%OFFの特大セール！ 9月30日まで）

これを、2020年8月1日〜9月30日まで表示するとした時、以下のように記述します。

<script>
$(function(){

    //現在の日付データを取得する準備
    var day = new Date(); 

    var y = day.getFullYear(); //西暦を取得
    var m = day.getMonth()+1; //月を取得
    var d = day.getDate(); //日を取得

    //月日1ケタの場合は0を追加
    if (m < 10) { m = '0' + m; }
    if (d < 10) { d = '0' + d; }

    today = y+m+d;//日付を連結させる

    //2020年8月1日～2020年9月30日の期間のみ表示
    if(today >= "20200801" && today <= "20200930" ){
        $(".sample").html('今がチャンス！ 全品25%OFFの特大セール！ 9月30日まで');
    } else {
    //条件に合わない場合
        $(".sample").html('現在開催中のキャンペーンはありません。');
    }

});
</script>

<div class="sample"></div>

$(function(){

//現在の日付データを取得する準備

var day = new Date();

var y = day.getFullYear(); //西暦を取得

var m = day.getMonth()+1; //月を取得

var d = day.getDate(); //日を取得

//月日1ケタの場合は0を追加

if (m < 10) { m = '0' + m; }

if (d < 10) { d = '0' + d; }

today = y+m+d;//日付を連結させる

//2020年8月1日～2020年9月30日の期間のみ表示

if(today >= "20200801" && today <= "20200930" ){

$(".sample").html('今がチャンス！全品25%OFFの特大セール！ 9月30日まで');

} else {

//条件に合わない場合

$(".sample").html('現在開催中のキャンペーンはありません。');

}

});

</script>

ここでのポイントは、月の取得時に、「day.getMonth()+1;」として、+1しているところです。

「getMonth()」は、今の月を0～11の整数で取得しますので、今の月が5月であれば、4の整数を取得します。
これでは、正確な日付が取得できませんので、+1をして4の整数を5にしています。

If分内の条件は、日付を連結させたtodayに対して条件を指定しています。
今日が2020年の5月10日であれば、todayの中身は「20200510」となります。
条件が、「2020年8月1日（20200801）～2020年9月30日（20200930）」の間であれば、表示するという設定ですので、それ以外の数値がtodayに入っていた場合は、elseが実行されます。

下に設定した箇所がありますが、2020年8月18日にアクセスすると、todayの中身が「20200818」となりますので、表示されます。
それ以外の期間は「現在開催中のキャンペーンはありません。」が表示されます。

夏期休業や年末年始休業など、jqueryを使うことで、様々な用途に使用することができます。

画像の期間限定の表示切り替え

キャンペーン期間限定のバナーを表示したい時などに使える、先程の応用です。
表示する内容をテキストではなく、画像にしてみます。

<script>
$(function(){

//現在の日付データを取得する準備
var day = new Date(); 

var y = day.getFullYear(); //西暦を取得
var m = day.getMonth()+1; //月を取得
var d = day.getDate(); //日を取得

//月日1ケタの場合は0を追加
if (m < 10) { m = '0' + m; }
if (d < 10) { d = '0' + d; }

today = y+m+d;//日付を連結させる

//2020年8月1日～2020年8月31日の期間のみ表示
if(today >= "20200801" && today <= "20200831" ){
$(".sample2").html('<img src="s_banner.jpg"><p style="font-size:11px;">※素材：イラストAC</p>');
} else {
//条件に合わない場合
$(".sample2").html('現在キャンペーンは行っておりません。');
}

});
</script>

<div class="sample2"></div>

$(function(){

//現在の日付データを取得する準備

var day = new Date();

var y = day.getFullYear(); //西暦を取得

var m = day.getMonth()+1; //月を取得

var d = day.getDate(); //日を取得

//月日1ケタの場合は0を追加

if (m < 10) { m = '0' + m; }

if (d < 10) { d = '0' + d; }

today = y+m+d;//日付を連結させる

//2020年8月1日～2020年8月31日の期間のみ表示

if(today >= "20200801" && today <= "20200831" ){

$(".sample2").html('<img src="s_banner.jpg"><p style="font-size:11px;">※素材：イラストAC</p>');

} else {

//条件に合わない場合

$(".sample2").html('現在キャンペーンは行っておりません。');

}

});

</script>

以下は上記の設定例になります。

期間外にこのページを見ると少しわかりづらいかもしれませんが、ぜひご自身の環境にてトライしてみてください。

コンテンツごと表示を切り替える

さらに応用で、今度はテキスト、画像を含んだコンテンツごと、期間を設定したいと思います。

この方法では、あらかじめHTMLを組んでおき、期間によって対象のコンテンツのみを残し、それ以外は削除するという、少し強引な方法となりますのであしからず。

$(function(){

//現在の日付データを取得する準備
var day = new Date(); 

var hour = day.getHours(); //時を取得

if ( 0 <= hour && hour <= 11 ){
//1.現在の時間帯が午前であれば、午後を削除
$(".sample3-pm").remove();
} else if ( 12 <= hour && hour <= 23 ) {
//1.現在の時間帯が午後であれば、午前を削除
$(".sample3-am").remove();
}

});