JavaScriptで一定期間だけnewアイコンを表示する

一定期間だけnewアイコンを表示したいということがたまにあるので、JavaScriptでの実装方法をメモ。

サンプルコード

まずはHTMLです。
newアイコンの要素にdata属性でdata-postdateを設定して、その記事の投稿日を入れるようにします。

<div class="list">
  <div class="article">
    <span class="new" data-postdate="2019-10-12">NEW</span>
    <p class="date">2019.10.12</p>
    <h2 class="ttl">記事タイトルD</h2>
  </div>
  <div class="article">
    <span class="new" data-postdate="2019-9-30">NEW</span>
    <p class="date">2019.9.30</p>
    <h2 class="ttl">記事タイトルC</h2>
  </div>
  <div class="article">
    <span class="new" data-postdate="2019-9-10">NEW</span>
    <p class="date">2019.9.10</p>
    <h2 class="ttl">記事タイトルB</h2>
  </div>
  <div class="article">
    <span class="new" data-postdate="2019-8-31">NEW</span>
    <p class="date">2019.8.31</p>
    <h2 class="ttl">記事タイトルA</h2>
  </div>
</div>

CSSはnewアイコンの表示部分のみ抜粋していますが、デフォルトは非表示にして、.is-showがついた場合のみ表示するようにします。

.new {
	display: none;
}
.new.is-show {
	display: inline-block;
}

最後にJavaScriptですが、data-postdateに設定されている日にちと現在の日にちを比較して、1行目に設定した日数を過ぎていなければ.is-showをつけるようにします。

var periodDay = 30; // アイコンを表示する日数

var current = new Date();
var postdate = document.querySelectorAll('[data-postdate]');
for (var i = 0; i < postdate.length; i++) {
  var d = new Date(postdate[i].dataset.postdate);
  d.setDate(d.getDate() + periodDay);
  if(current < d) {
  	postdate[i].classList.add('is-show');
  }
}

これで指定した期間内だけnewアイコンが表示されるようになりました。
newアイコン表示のデモページ