WEB制作備忘録

時間指定 時間を指定して変更 タイマー

バナーなどで時間や期間が決まっている時
自動で出し入れしたい!と思いますよね。
お店とかしてると結構ありますよね。
備忘録かねて時間を指定して
バナーや画像を変更する方法をご紹介します。

やり方

楽天ストアでも楽天GOLDならで使えます。
仕組みとしてはJavascriptとHTMLで作成。

コードは↓

<script>
<!--
window.onload = function() {
var now = new Date();
var start = new Date('2022/9/30 0:00:00'); // 表示開始日時(時間は24h表記)
var end = new Date('2022/10/30 23:59:59'); // 表示終了日時(時間は24h表記)
 
if ( start <  now && now < end ) {
    document.getElementById("timeLimitedScript").style.display="block";
}
}
-->
</script>

時間指定は↓に書き込みます。

var start = new Date('2022/9/30 0:00:00’); ← 表示開始時刻
var end = new Date('2022/10/30 23:59:59’); ← 表示終了時刻

置き場所はbody開始のすぐあとに。
ここまで入れたら
あとは期間限定のバナーなど
表示をさせたい内容のHTMLタグを
下のコード囲みます。

<div id="timeLimitedScript" style="display: none;">
期間限定にしたい内容
</div>

これでちょっと楽になりますね。