指定日時で要素の表示・非表示を切り替える

セールとか長期休暇とか指定の期間だけバナーを表示したいことがある。そんな時用の表示切替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);