Blog

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

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

2016/07/13

javascript

備忘録です。

参考サイト
バナー画像などを期間指定で表示するjavascript

htmlソースコード 
<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>

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

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

<div>内は、自由に書き換えてもらってOKです。

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

クラスで指定する方法としては「getElementsByClassName」があります。
サンプルソースで仮に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"; 
}



カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ