jQuery

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

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

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

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

テキストの指定期間表示

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

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

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

ここでのポイントは、月の取得時に、「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を使うことで、様々な用途に使用することができます。
 

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

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

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

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

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

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

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

上述、1の箇所は午前中、2の箇所は午後に表示と設定しています。
以下表示例です。

現在は午前です。

今日も元気に出発しましょう!

現在は午後です。

さあ、今日も大詰めです。
ご飯食べて、お風呂入って、夜更かししないようにしましょう。

ここで使用している「remove()」は、指定した要素を削除する。
というものになります。
時間のデータを「Date().getHours();」で取得していますが、これは今の時を整数で、0~23を取得します。
つまり、今の時が13:00であれば、12の整数が取得されることになります。

このように期間を指定して、あらかじめコンテンツを作成し切り替えることで、
更新の手間が省けるのはもちろんのこと、先のテキストや画像も織り交ぜると、
アイデア次第でさらにユーザーの目を引く、面白い表現が可能になります。
 

まとめ

このように、期間指定一つとっても、アイデア次第で様々な表現が可能となります。

jQueryを活用することで、もっと面白いコンテンツが作り出せますし、効率もどんどん良くなります。
ぜひともチャレンジしてみてください。

  • このエントリーをはてなブックマークに追加