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

公開日:  最終更新日:2022/08/18

バナー画像などの要素を期間指定で表示するjavascript/jsサンプルソース付き
ネットショップを運営していくなかで楽天スーパーセールのような期間限定のイベントを実施することがあると思います。

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

そこで、本日は表示したい画像等を期間指定出来る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>

※1行目の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つだけ表示された状態になります。

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




Comment

  1. トシ より:

    楽天のバナーの自動の消し方を探したどり着きました。

    すみません、これをid設定ではなく、classでやりたい(同時に消したい箇所が2ヶ所以上)ときはどのような記述になるでしょうか。

    教えてもらえると嬉しいです。
    よろしくお願いいたします。

    • peacepopo より:

      トシさん
      コメントありがとうございます。
      クラスで指定する方法について追記しました。

  2. 埼玉のかえる より:

    貴重な情報をありがとうございます。
    「blog-entry-40 javascriptを使って画像などを期間指定で表示・非表示」を利用させていただき、通常時(usually)に表示するバナーを時間帯によって変えたいと思っています。
    を以下のように記述したところ、イベント時(Event)と通常時(usually)の両方が同時に表示されます。
    の中に記したを通常時(usually)の時のみ動かす方法をご教授いただけませんでしょうか?

    var date = new Date();
    var hour = date.getHours();
    var minute = date.getMinutes();
    if((hour == 0 && minute >= 0) || (hour >=1 && (hour <= 12 && minute < 30))){
    document.write('’);
    }else{
    if((hour == 12 && minute >= 30) || (hour >=13 && hour < 14)){
    document.write('’);
    }else{
    if((hour == 14 && minute >= 0) || (hour >=15 && (hour <= 18 && minute < 30))){
    document.write('’);
    }else{
    if((hour == 18 && minute >= 30) || (hour >=19 && (hour < 24 && minute < 0))){
    document.write('’);
    }
    }
    }
    }

  3. 埼玉のかえる より:

    すみません。タグが消えてしまいました。再送します。
    貴重な情報をありがとうございます。
    「blog-entry-40 javascriptを使って画像などを期間指定で表示・非表示」を利用させていただき、通常時(usually)に表示するバナーを時間帯によって変えたいと思っています。
    <div id=”Usually”>を以下のように記述したところ、イベント時(Event)と通常時(usually)の両方が同時に表示されます。<div id=”Usually”>の中に記した内容を通常時(usually)の時のみ動かす方法をご教授いただけませんでしょうか?
    <div id=”Usually”>
    var date = new Date();
    var hour = date.getHours();
    var minute = date.getMinutes();
    if((hour == 0 && minute >= 0) || (hour >=1 && (hour <= 12 && minute = 30) || (hour >=13 && hour = 0) || (hour >=15 && (hour <= 18 && minute = 30) || (hour >=19 && (hour < 24 && minute < 0))){
    document.write('’);
    }
    }
    }
    }
    </div>

  4. 埼玉のかえる より:

    何度もすみません。まだ、タグが消えていました。再々送します。
    「blog-entry-40 javascriptを使って画像などを期間指定で表示・非表示」を利用させていただき、通常時(usually)に表示するバナーを時間帯によって変えたいと思っています。
    >div id=”Usually”>を以下のように記述したところ、イベント時(Event)と通常時(usually)の両方が同時に表示されます。>div id=”Usually”>の中に記した内容を通常時(usually)の時のみ動かす方法をご教授いただけませんでしょうか?

    >div id=”Usually”>
    <script type=”text/javascript”>
    var date = new Date();
    var hour = date.getHours();
    var minute = date.getMinutes();
    if((hour == 0 && minute >= 0) || (hour >=1 && (hour <= 12 && minute = 30) || (hour >=13 && hour = 0) || (hour >=15 && (hour <= 18 && minute = 30) || (hour >=19 && (hour < 24 && minute < 0))){
    document.write('<img src="./images/banner_04.png" />');
    }
    }
    }
    }

    >/script>
    >/div>

    • peacepopo より:

      埼玉のかえる 様
      コメントありがとうございます。

      ソースを確認したところ、おそらく現在のソースではjavascriptの構文エラーになっており、イベント時のバナーも通常時のバナーも両方表示された状態になっているような気がします。
      記事内に時間帯ごとに表示を変える方法について追記してみましたので、参考にしてみてください。

  5. 埼玉のかえる より:

    さっそくありがとうございます。
    ご指摘いただいた点、まさにそのとおりでした。
    希望どおりの設定をすることができました。
    本当にありがとうございます。

  6. axis より:

    初めまして!
    いつも参考にさせて貰っています。

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

    ですが、下の説明には
    <div id=”MyEvent”></div>の中に期間内に表示したい内容を記述 となっています

    の間違いではないですか?

    間違っていたらすみません(汗)

  7. axis より:

    上手く表示がでなかったので再投稿です

    初めまして!
    いつも参考にさせて貰っています。

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

    <div id=”Event”>~のコピペできる部分
    ですが、下の説明には
    <div id=”MyEvent”></div>の中に期間内に表示したい内容を記述 となっています

    <div id=”MyEvent”>
    の間違いではないですか?

    間違っていたらすみません(汗)

    • peacepopo より:

      axis様
      コメントありがとうございます。
      また、ソースの記述間違いのご指摘ありがとうございます。
      追記を何度かしていく中で間違えて修正してしまっていたようです。
      記事内のソース修正しました。

  8. こっこるぴあ より:

    いろいろ、探してみてこのサイトにたどり着いていろいろ参考にさせてもらってます。
    ありがとうございます

    質問になりますが、この記述だと、Pc時計のブラウザ準拠なっているため、いくら時刻設定をしても、ユーザーの時刻設定によって表示される人とされない人出てくるのではないかと思います。

    解決方法などありましたら教えてください

    • peacepopo より:

      こっこるぴあ 様

      コメントありがとうございます。

      >質問になりますが、この記述だと、Pc時計のブラウザ準拠なっているため、いくら時刻設定をしても、ユーザーの時刻設定に・・・

      ご指摘の通りユーザーの端末の設定時刻に依存しますね。
      javascriptはユーザー側の環境に処理を依存する仕組みになっているので、ユーザーによって違いが出てくる可能性はあります。ただ、ここでは楽天市場、Yahooショッピング等の枠組みが用意されている中で簡単に実装出来る方法として紹介しています。

      他の方法としては
      ・ECキューブなどサーバー側のプログラムを自由にカスタマイズできるのであればPHP等でサーバーの時計時刻に応じて表示をかえる。
      ・指定時間にページ更新(FTP送信)をして自動的にページ内容自体を書き換える。
      など考えられるかもしれません。

  9. Tengu3 より:

    はじめまして、誌面デザインやWebデザインを担当しているものです。最近SEが急遽退職してしまい、Web内のスクリプト部分も並行して担当することとなり、いろいろ動的部分を勉強しているものです。
    時間ごとの画像の表示、非表示のJAVASCRIPT使わせて頂きました。

    一つ、当たり前のことかも分かりませんが、この記述にある「DIV ID」の表示、非表示ですが

    この指定したDIV IDが、同じHTML内にDIVのCSS表記があると作動するのですが
    別のフォルダーにCSSファイルが有り、それを呼び出して表示させているものはこのスクリプトが使えないのですが、これは「こういうもの」なのでしょうか?
    それとも、DIV IDの名称を書く所に「絶対パス」を記述する必要があるのでしょうか。

    ド初心者の質問ですがよろしくお願いします。
    今回は同一HTML内に、イベント用のCSS記述を追加してBOXを作り、そこにバナーを入れました。ただ、こういったバナーを増やしていくとHTMLの記述が長くなっていくのでできればCSSファイルを分けたいと思っています。

    • peacepopo より:

      Tengu3 様

      コメントありがとうございます。
      別のフォルダにCSSファイルがあり、それを読み込んでいるとのことですので
      <link rel="stylesheet" type="text/css" href="">
      という記述で外部のCSSを読み込んでいるのだと思われます。

      表示、非表示のjavascriptでは、外部のCSSを読み込むと動作しないということは、ないと思うのですが
      javascriptは、HTML内に記述されている状態なのでしょうか?
      javascriptを外部ファイルにしたいということではないですよね?
      動作する場合としない場合の違いはCSSの読み込みを変えた場合のみですか?
      すいません、状況が把握できていないので、わかる範囲で教えて頂けたら助かります。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク
PAGE TOP ↑