期間が過ぎたらアイコンを非表示にするJava Script

webサイトでよく目にするnewアイコン。
いつまでもnewアイコンつけたままの場合も多いです(あまりよろしくない)が、クライアント先によっては、数日後に消してくださいということもあります。

数日後、忘れずに消せばいいのですが、結構な頻度で忘れます。
だったら、過去に書いたブログ記事をちょっと変更して期間がきたら消すようにすれば忘れずにすみますね。

楽天などECショップの更新をしていると時間指定でバナーをアップする作業が発生します。毎回、手作業で更新していました。時間指定で切り替えられると楽だなと思い、下記サイトを参考にして指定時間でバナーが切り替わるように設置しました。バナー画像...

今回は複数のnewアイコンを消したかったのでclass指定ででJava scriptを書きました。
classだと複数要素あるので、for文でループ処理が必要です。条件に合致したclassを表示・非表示切り替えするようにしています。

HTML

1	`<p><span` `class="new">NEW</span>新着情報です。</p>`

Java script

終了日のみ指定

基本は更新日からnewアイコンを表示すると思うので、終了日のみ指定でいいのではないでしょうか。

<script>
    // 終了設定
    var endday = new Date('2016/08/13 23:59:59');  //終了日を指定
    var today = new Date();
    var kesu = document.getElementsByClassName("new");  //表示切替したいクラス
 
    for(var i=0; i < kesu.length; i++) {
        if ( today < endday ){
            kesu[i].style.display="block";
        }else{
            kesu[i].style.display="none";
        }
    }
</script>

開始日・終了日のみ指定

もしかしたら更新日ではなく指定の日にちからnewアイコンを表示したいという場合もあるかもしれません。
その場合は下記のように条件に開始日を追加すればOKです。

<script>
    // 開始、終了設定
    var startday = new Date('2016/08/03 00:00:00');  //開始日を指定
    var endday = new Date('2016/08/13 23:59:59');  //終了日を指定
    var today = new Date();
    var kesu = document.getElementsByClassName("new");  //表示切替したいクラス
 
    for(var i=0; i < kesu.length; i++) {
        if ( startday < today && today < endday ){
            kesu[i].style.display="block";
        }else{
            kesu[i].style.display="none";
        }
    }
</script>