1番簡単 Javascriptで時限バナーの実装方法

ネットショップを管理しているとキャンペーンなどでこの期間/時間だけバナーを表示したいということはありませんか？

著者が仕事でよく言われたのは日付が変わるタイミングでバナーの上げ下ろしをしたいという事でした。深夜に手作業なんてしたくないということでバナーの表示を自動化する方法を紹介させていただきます。

HTML&CSS
Javascript
注意点
最後に

HTML&CSS

本来はHTMLとCSSは分けて書くべきで直書きは推奨されないのですが、メンテナンス性を重視してこちらを使用します。styleやサイズは自由に変えて下さい。

<div id="img_banner" style="max-width:800px;margin:0 auto 0;display:none;"><a href="ここにリンク" onclick="this.href=_wa.link(this.href)" target="_blank">
<div class="img"><img src="ここに画像名" width="100%" alt=""></div>
</a></div>

Javascript

指定した時間に対象のバナーがCSSの切り替えで表示されるようになります。

このままコピペして開始時間と終了時間の変更だけで使う事ができ、jQueryも使用していないのでファイルを追加で読み込む必要もないですしJSのみで動くので簡単だと思います。

<script>
var today = new Date();
var stday = new Date(2023,9-1,22,00,00,00);//開始時間
var edday = new Date(2023,9-1,23,00,00,00);//終了時間
setTimeout(function(){
    if( (edday - today ) > 0 &&  (stday - today ) < 0) {
         document.getElementById("img_banner").style.display ="block";
    }
},1000);
</script>

イメージとしては既にバナーは見えないように設置してあり時間が来たらCSSで見えるようにしている感じです。

▼下記コピペ用

<div id="img_banner" style="max-width:800px;margin:0 auto 0;display:none;"><a href="ここにリンク" onclick="this.href=_wa.link(this.href)" target="_blank">
<div class="img"><img src="ここに画像名" width="100%" alt=""></div>
</a></div>
<script>
var today = new Date();
var stday = new Date(2023,9-1,22,00,00,00);//開始時間
var edday = new Date(2023,9-1,23,00,00,00);//終了時間
setTimeout(function(){
    if( (edday - today ) > 0 &&  (stday - today ) < 0) {
         document.getElementById("img_banner").style.display ="block";
    }
},1000);
</script>