🛒

[JS] 指定日時になったらバナーなどを表示／非表示にする

2022/07/01に公開

JavaScript

tech

はじめに

ECサイトを管理していると、
指定の日時でバナーを公開してほしいという依頼がよくあります。
日中なら手作業でも対応できますが、
深夜0時に公開という対応もあったりするので、
JavaScriptで自動化してしまおう、と実装してみました。

記述例

CSS

まずはCSSで表示時と非表示時のクラスを設定します。

.timerHidden{ display: none;}
.timerVisible{ display: block;}

JS

指定した時間に.timerHiddenと.timerVisibleを切り替える処理を記述します。

var myClass = document.getElementsByClassName("timerHidden");
for (var i = 0; i < myClass.length; i++){
    var appearTime = myClass[i].getAttribute("data-appear_time");
    var disappearTime = myClass[i].getAttribute("data-disappear_time");
    var threshould_start = Date.parse(appearTime);
    var threshould_end = Date.parse(disappearTime);
    var current = new Date();
    if (threshould_start < current && threshould_end > current) {
      // HTMLで設定した期間
      myClass[i].classList.add("timerVisible");
    } else {
      // 上の期間外の場合
      myClass[i].classList.remove("timerVisible");
    }
}

HTML

非表示のためのクラスtimerHidden、
表示したい期間を指定します。

<div class="timerHidden" data-appear_time="2022/01/01 12:00:00" data-disappear_time="2022/01/31 12:00:00">
  <!-- ▼ 表示させたい内容を記述 ▼ -->
  <a href=""><img src="img/img_01.jpg"></a>
  <!-- ▲ 表示させたい内容を記述 ▲ -->
</div>

おわりに

日時はHTML上に記述するので、
その箇所ごとに時間を変えて設定できます。
複数ページで使う場合は、共通のCSSやJSに仕込んでおくと便利ですね ^_^

はじめに

記述例

CSS

JS

HTML

おわりに

Discussion