セールとか長期休暇とか指定の期間だけバナーを表示したいことがある。そんな時用の表示切替jsです。

要素にclass="switch"を指定し、displayを切り替えます。
startとendに「yyyy/MM/dd HH:mm:ss」の形式で日時をセット。
切り替える要素はリストでも画像でもよく、いくつでも増減できるのがミソだけど、表示・非表示によるデザイン崩れの可能性は念頭に置いておく。

switch.html

<!--
class="switch"の要素に開始日時・終了日時を指定しておく。
ex)start="2017/10/10 10:00:00" end="2017/11/11 11:11:11"
-->
<ul>
	<li class="switch" start="2017/01/01 00:00:00" end="2017/01/03 23:59:59">
		<img src="image.jpg">
	</li>
	<li class="switch" start="2017/01/01 00:00:00" end="2017/12/31 23:59:59">
		<img src="image.jpg">
	</li>
	<li class="switch" start="2017/07/01 12:34:56" end="2017/07/14 20:30:40">
		<img src="image.jpg">
	</li>
</ul>

switch.js


// 指定期間内だけ要素の表示をする

window.addEventListener(
	"DOMContentLoaded",
		function(){
		var now = new Date();
		var switch = document.getElementsByClassName("switch");
		var switch_length = switch.length;

		// 開始日時より後、かつ終了日時より前の期間は表示
		for( var i = 0; i < switch_length; i++ ) {
			var start = new Date(switch[i].attributes["start"].value);
			var end = new Date(switch[i].attributes["end"].value);

			if(now > start && now < end){
				switch[i].style.display = "block" ;
			}else{
				switch[i].style.display = "none" ;
			}
		}

	}, false);