スライドバナー画像の表示に日時指定する！

期限を設定してバナーを表示・非表示できたら、日時を気にして自分でいちいち外さなくていいし、楽天市場のキャンペーンみたいに夜中に終了しようと、時間になったらサッと非表示にできます！コピペで出来るので、興味がある方はぜひやってみて下さい⭐️

Swiperスライダーを用意する

先日の記事のSwiperスライダーを使っていきます。

【無料】スライドバナーを作ってみよう！

index.htmlに時間指定で表示非表示のJavaScriptを追加する

下記を</style>と<script>の間についきします。

---

<!-- time limit -->

<script type="text/javascript">

let myClass = document.getElementsByClassName("js-time_limited");

for (let i = 0; i < myClass.length; i++) {

let appearTime = myClass[i].getAttribute("data-appear_time");

let disappearTime = myClass[i].getAttribute("data-disappear_time");

let threshould_start = Date.parse(appearTime);

let threshould_end = Date.parse(disappearTime);

const current = new Date(Date.now() + ((new Date().getTimezoneOffset() + (9 * 60)) * 60 * 1000));

if (threshould_start > current || threshould_end < current) {

myClass[i].classList.add('disappear');

}

}

let myClass2 = document.getElementsByClassName("disappear");

for (let i = myClass2.length - 1; i >= 0; i--) {

myClass2[i].remove();

}

</script>

<!-- /time limit -->

---

▼こんな感じになったはず

index.htmlのdivに時間指定する

<div class="swiper-slide">にコードを追記します。

---

<div class="swiper-slide js-time_limited" data-appear_time="2023/04/26 01:00:00" data-disappear_time="2023/04/30 23:59:59">

 <img src="img/banner01.jpg" alt="">

</div>

---

⭐️data-appear_timeのところに表示開始日時を設定

⭐️data-disappear_timeのところに表示終了日時を設定

＊日本時間の設定になります

---

いかがでしたか？

これでもう、キャンペーンバナーは時間ぴったりに表示・非表示されるようになり、気持ち的にも作業的にも、大分負担が減るのではないでしょうか。ぜひ色々試してみてくださいね！ 🙂

今回は以上です！お疲れ様でした☆