バナー画像などを期間指定で表示するjavascript

ネットショップを運営していくなかで楽天スーパーセールのような期間限定のイベントを実施することがあると思います。

イベントの期間だけ表示したいバナーがあるんだけど、イベント開始、終了が夜中だったりすると更新するのが大変ですよね。

そこで、本日は表示したい画像等を期間指定出来るJavascriptを紹介したいと思います。(H27.6.10追記あり)

javascriptを使って画像などを期間指定で表示・非表示

<div id="MyEvent">
   <a href="リンク先URL">
       <img src="画像URL">
   </a>
</div>
 
<div id="Usually">
   通常時に表示する内容
</div>
 
<script>
// イベントの開始、終了設定
var startday = new Date('2013/07/07 00:00:00');
var endday = new Date('2013/07/09 23:59:59');
 
var today = new Date();
if ( startday < today && today < endday ){
   document.getElementById("MyEvent").style.display="block";
   document.getElementById("Usually").style.display="none";
}else{
   document.getElementById("MyEvent").style.display="none";
   document.getElementById("Usually").style.display="block";  
}
</script>

※１行目のid名(Event)とscriptで指定しているid名(MyEvent)が違っていたので修正しました。MyEventで統一しました。ご指摘ありがとうございます。

やっていることは簡単で開始日時、終了日時を指定しておいて
javascriptで読み込まれる度に現在の時間と比較してdiv要素を表示する、しないを処理しています。

＜div id=”MyEvent”＞＜/div＞の中に期間内に表示したい内容を記述
＜div id=”Usually”＞＜/div＞の中に期間外（通常時）に表示しておきたい内容を記述

＜div＞内は、自由に書き換えてもらってOKです。
（id=MyEventとid=Usuallyを表示・非表示しているため）

あらかじめイベント前に期間を設定してページに組み込んでおけば、あとは時間が来れば勝手に表示されるようになり、終了すれば表示されなくなり通常時の表示に戻ります。
簡単なコードなのでぜひ活用してみてください。

Id指定ではなく、classで複数の要素を指定する場合

コメントにてクラス名の場合について問い合わせいただいたので追記

クラスで指定する方法としては「getElementsByClassName」があります。
↓↓クラス名を指定して一括で非表示

var element = document.getElementsByClassName(“class名”);
for (var i=0;i<element.length;i++) {
element[i].style.display = “none”;
}

でクラス名で指定して一括で非表示にすることが可能です。

サンプルソースで仮にclass=”MyEvent”が複数あった場合
17行目から23行目は下記に変わります。

if ( startday < today && today < endday ){
    var element = document.getElementsByClassName("MyEvent");
    for (var i=0;i<element.length;i++) {
      element[i].style.display = "block";
    }
   document.getElementById("Usually").style.display="none";
}else{
    var element = document.getElementsByClassName("MyEvent");
    for (var i=0;i<element.length;i++) {
      element[i].style.display = "none";
    }
   document.getElementById("Usually").style.display="block"; 
}

といった感じで比較的、シンプルな記述を追加すればクラスに対しても可能です。
※注意、getElementsByClassNameは、IEの8以下に対応していません。

IE8以下の対応が気になる場合は下記を参考にしてみてください。

外部サイト
[JS] IE8にも対応できるクラス名から要素を取得する方法
getElementsByClassName を IE8 で使う

時間帯ごとに表示する画像を切り替える場合

H27.6.10 追記しました
コメント欄にて「表示するバナーを時間帯によって変えたい」という内容を頂きましたのでサンプルを紹介したいと思います。

最初に紹介したソースの＜div id=”Usually”＞通常時に表示する内容＜/div＞の期間指定をしたイベント以外の通常時に表示する内容を時間帯ごとに変える方法です。

<div id="MyEvent">
  <a href="#">
    <img src="画像URL">
  </a>
</div>

<div id="Usually">
通常時に表示する内容を
時間帯ごとに変更する
  <div id="img1">
    <img src="画像URL">
  </div>
  <div id="img2">
    <img src="画像URL">
  </div>
  <div id="img3">
    <img src="画像URL">
  </div>
  <div id="img4">
    <img src="画像URL">
  </div>		
  <div id="img5">
    <img src="画像URL">
  </div>	
</div>

<script>
// 開始、終了設定
var startday = new Date('2013/07/07 00:00:00');
var endday = new Date('2013/07/09 23:59:59');
// ここまで

var today = new Date();
if ( startday < today && today < endday ){ 
  document.getElementById("MyEvent").style.display="block";
  document.getElementById("Usually").style.display="none";
}else{
  document.getElementById("MyEvent").style.display="none";
  document.getElementById("Usually").style.display="block";
}


//ここから時間帯ごとの表示、非表示処理

//現在の時間を 00:00 形式で取得
var hour =  today.getHours();
var minute =  today.getMinutes();
var time = ('0' + hour).slice(-2) + ":" + ('0' + minute).slice(-2);

//id=img1 ～ img5 の要素をすべて非表示にする
document.getElementById("img1").style.display="none";
document.getElementById("img2").style.display="none";
document.getElementById("img3").style.display="none";
document.getElementById("img4").style.display="none";
document.getElementById("img5").style.display="none";

if(time >= "00:00" && time < "12:30"){
  //00:00～12:29 は img1を表示する
  document.getElementById("img1").style.display="block";
}else if(time >= "12:30" && time < "14:00"){
  //12:30～13:59 は img2を表示する
  document.getElementById("img2").style.display="block";
}else if(time >= "14:00" && time < "18:30"){
  //14:00～18:29 は img3を表示する
  document.getElementById("img3").style.display="block";
}else if(time >= "18:30" && time < "24:00"){
  //18:30～23:59 は img4を表示する
  document.getElementById("img4").style.display="block";
}else{
  //もし、上記で指定がない時間帯がある場合は img5を表示する
  document.getElementById("img5").style.display="block";
}
</script>

10行目から24行目では、5つのdivを追加して、それぞれにimg1からimg5のid属性を指定してます。そして各div内に表示したい内容を記述します。

46行目から48行目では、現在の時間を00:00形式で取得しています。時間、分を別々に取得して比較しても良いですが、比較する際の記述が複雑になってしまうので00:00形式にしています。

51行目から55行目のスクリプト処理では、いったんimg1～img5を非表示にしています。

57行目から72行目では、現在の時間と表示を切り替えたい時間帯を比較して処理を振り分けています。時間帯を調整する場合は、ここにある時間帯を調整する形になります。該当する時間帯の中の処理は、要素を非表示から表示状態にしているだけです。

いったん、img1～img5をすべて非表示にしていたので、ここでは1つの要素を表示状態に変更するだけで1つだけ表示された状態になります。

こちらも参考にしてみてください。

ネットショップ運営の気になる備忘録

 

2 Users

15 Pockets

JavaScriptで曜日ごとに表示内容を変える方法

ネットショップ運営の気になる備忘録

 

4 Users

15 Pockets

楽天イベントバナーをスライド表示・掲載期間を設定する方法