JavaScriptでバナーの表示非表示を自動設定する
2021.06.11お客様からのバナーの設置依頼で「このバナーを〇月〇日から〇月〇日まで掲載したい」といった時に、バナー掲載開始日と終了日にわざわざhtmlを編集してバナーを設置したり削除したりするのって面倒ですよね？しかも時間が空いたりすると忘れてしまったりする場合はあります。
JavaScript（以下：js）を使えばこういった作業を自動化できますので、jsを使って表示したり非表示にしたりといった方法をご紹介します。
サンプルコード
<a href="#" id="eventBanner">
<img src="/images/banner.jpg" alt="バナー">
</a>
<script>
//掲載開始、終了の時間をセット
var startday = new Date('2021/01/01 10:00:00');
var endday = new Date('2021/03/31 10:00:00');
//本日の時間をセット
var today = new Date();
//本日の時間と掲載開始終了時間を比較してバナーの表示非表示を決定
if ( startday < today && today < endday ){
document.getElementById("eventBanner").style.display="block";
} else {
document.getElementById("eventBanner").style.display="none";
}
</script>
まずはサンプルソースの全体をご覧ください。
画像であるimgタグをaタグで囲ったごく一般的なバナーのhtmlの要素と、そのバナーを表示したり非表示にしたりするjsのコードです。ではこのコードを分割して説明していきます。
htmlのバナー部分
<a href="#" id="eventBanner">
<img src="/images/banner.jpg" alt="バナー">
</a>
このバナーに関してはjsで指定するために分かりやすいidを付与します。
掲載開始、終了の時間をセット
//掲載開始、終了の時間をセット
var startday = new Date('2021/01/01 10:00:00');
var endday = new Date('2021/03/31 10:00:00');
//本日の時間をセット
var today = new Date();
次に比較するための時間を変数にセットしていきます。
「掲載開始日」がstartday、終了日がendday、そして本日の時間をtodayの変数にセットし、次にif文で比較していきます。
本日の時間と掲載開始終了時間を比較してバナーの表示非表示を決定
//本日の時間と掲載開始終了時間を比較してバナーの表示非表示を決定
if ( startday < today && today < endday ){
document.getElementById("eventBanner").style.display="block";
} else {
document.getElementById("eventBanner").style.display="none";
}
if文では、掲載開始日が本日の時間が掲載日より小さいかつ終了日が本日の時間より大きい場合は真、そうでなければ偽といった記述になります。
真である、つまり掲載期間中であれば指定されたidの[eventBanner]の要素にdisplay:block;のスタイルを追加します。
掲載期間外である偽の場合はdisplay:none;を追加するのでバナーの要素は非表示となります。
以上のコードでバナーを表示したり非表示にしたりといったことを自動化することが可能となります。コードの量もそんなに多くありません。これだけでバナーの表示非表示に関する手作業を省略可出来ますので、コスト削減にもつながりますし何より忘れないことはクライアントの信頼にもつながるかと思います。
今回はバナーの要素に直接displayのスタイルを追加してますが、これをクラスの付与や削除などにしても良いですし、もっと多彩な使い方が出来るかと思います。
