楽天などECショップの更新をしていると時間指定でバナーをアップする作業が発生します。
毎回、手作業で更新していました。
時間指定で切り替えられると楽だなと思い、下記サイトを参考にして指定時間でバナーが切り替わるように設置しました。
通常は2つのバナー切り替えで問題ないのですが、大型連休が重なると複数回バナー更新する必要がでてきました。
そこで、時間指定変数を増やして複数回バナー切り替えができるように設定してみました。
<div id="Special"> <a href="リンク先URL"> <img src="画像URL"> </a> </div> <div id="Event"> <a href="リンク先URL"> <img src="画像URL"> </a> </div> <div id="Usually"> 通常時に表示する内容 </div> <script> // イベントの開始、終了設定 var startday = new Date('2015/09/21 10:00:00'); var midday = new Date('2015/09/23 19:59:59'); var endday = new Date('2015/09/28 23:59:59'); var today = new Date(); if ( startday < today && today < midday ){ document.getElementById("MyEvent").style.display="block"; document.getElementById("Special").style.display="none"; document.getElementById("Usually").style.display="none"; } else if ( midday < today && today < endday ) { document.getElementById("MyEvent").style.display="none"; document.getElementById("Special").style.display="block"; document.getElementById("Usually").style.display="none"; }else{ document.getElementById("MyEvent").style.display="none"; document.getElementById("Special").style.display="none"; document.getElementById("Usually").style.display="block"; } </script>
これでstartday~middayの時間はID=MyEventで指定したバナーが表示、
midday~enddayの時間ID=Specialで指定したバナーが表示されました!
さらに切り替えたい場合は、変数を追加して else if を追加すればいくつでも切り替えられますね。
もっとスマートな書き方があるかもしれませんが、js勉強し始めたばかりの私にはわかりません。
peacepopoさんありがとうございます。
ためになる記事がたくさんなので、いつも参考にさせていただいています。