日付の設定で非表示と表示をさせる

10月に入ってもう半分以上、経ちますが…

でも、秋らしさの雰囲気になっていますね

街のお散歩に出かけると、金木犀のような甘い香りがたまに漂ってきてます。

朝と夜はだんだん涼しくなってきてるころ、日中は暑かったり涼しかったりの波が激しいんですが…

体調はしっかりと整えてくださいね。

話を取り戻して…

日付の設定で非表示と表示をさせる

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

よそのブログに、いつサーバーが消えるかわからないので、上記の参考を基に、ここで説明したいと思います。

まずは、CSSの設定から始めましょう。

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

次に、javascriptを組み立てていきますね。

CSSに指定しておいた時間に.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">
	<!-- ▼ 表示させたい内容を記述 ▼ -->
	<p>ここに表示をさせる内容を記述</p>
	<!-- ▲ 表示させたい内容を記述 ▲ -->
</div>