タイマーを使ってバナーの表示/非表示を自動で切り替える

キャンペーン期間中のみバナーを表示させたり、特定の期間だけページ全体のデザインを変えたりしたいなら、タイマーで自動で切り替えると便利です。

特にECサイトや集客向けのランディングページなど、時間の流れが早いコンテンツを管理しているときにおすすめです。

CONTENTS

サンプル
HTML
CSS
JavaScript

WordPressの表示速度No1！
初心者からからプロフェッショナルまで使えるロリポップサーバーは月額550円から！

サンプル

サンプルを見てみましょう。

See the Pen
タイマーを使って表示/非表示を自動で切り替える by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

この記事を見ているあなたが2024年12月31日23:59以前の場合、サンプルには「タイマーで表示中」と表示されています。逆に2025年1月1日0:00以降の場合、サンプルには何も表示されていません。

HTML

HTMLはこんな感じです。

<p class="js-timer" data-start="2024/1/1 0:00" data-end="2024/12/31 23:59">タイマーで表示中</p>

要素にjs-timerというclassを付けて、さらにdata属性に日時を入れます。data-startには表示期間が開始される日時、data-endには表示期間が終わる日時を入れます。

CSS

CSSは特に何もしなくてだいじょうぶです。が、スタイルを適用する場合は.js-timerを使わずに必ず他のclassを作ってそちらにスタイルを適用するようにしましょう。

JavaScript

JavaScriptはjQueryを使っています。

$(document).ready(function () {
  $(".js-timer").each(function (index, target) {
    var startDate = $(this).attr("data-start");
    var endDate = $(this).attr("data-end");
    var nowDate = new Date();

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

    if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

条件に合ったら.showで表示にして、条件に合わなかったら.hideで非表示になるというわけですね！