【js】更新1週間以内の記事にNEWを付ける

#概要
更新日から1週間以内の記事にNEWアイコンを付けたときのメモです。

#実装
今回はMTで記事一覧ページを作成して、jsで判定するようにしました。

※HTMLに出てくる<MT:～>はMTタグです。
　今回の実装とは特に関係ありまません。

HTML

HTMLは下記とします。
更新日時の横に「NEW」を表示するようにしたいと思います。

index.html

<div id="article_area">
  <ul class="article_list">
    <MT:PageContents count="10">
      <MT:Entries lastn="0">
        <li>
          <time class="created"><MT:EntryDate format="%Y.%m.%d"></time>
          <span class="category"><MT:EntryTitle></span>
          <!-- ここにNEWアイコンのHTMLを入れる -->
          <a href="<MT:Entrylink>" target="_blank"><MT:EntryTitle></a>
        </li>
      </MT:Entries>
    </MT:PageContents>
  </ul>
</div>

　
アイコン用のHTMLは以下です。

<span class="icon_new">NEW</span>

Javascript

jsで更新日時を判定してアイコン用のタグを挿入します。
ざっと以下のような流れで実装します。

new_icon.js

// 記事一覧のliタグを全て取得
var list = document.querySelectorAll('#article_area li');

// liをループで処理
list.forEach(element => {
    // <span class="category"></span>の下にアイコンを入れたいので親要素として取得
    var parent = element.querySelector('span.category');

    // 更新日時（2020.7.1）を取得して、.で年月日に分ける
    var time = element.querySelector('time.created').innerText.split('.');

    // 公開日の日付オブジェクト生成
    var created = new Date();
    created.setFullYear(time[0]);
    created.setMonth(time[1] - 1); // setMonth()は0～11なので、1引く
    created.setDate(time[2]);
    created.setHours(0, 0, 0, 0); // 時間を00:00:00に指定

    // 今日の日時と1週間後の日時を生成
    var today = new Date(new Date().setHours(0, 0, 0, 0));
    created.setDate(created.getDate() + 7);

    // 公開から1週間以内ならNEWアイコンを付与
    if (created >= today) {
        // NEWアイコン用のHTMLを生成
        var icon = document.createElement('span');
        icon.className = 'icon_new';
        icon.innerText = 'NEW';
        parent.after(icon); // 親要素の後ろにNEWアイコンを挿入
    }
});

NEWアイコンを付けるため、タイトル一覧のliタグを取得して1つずつ日時を判定しています。
setMonth()は0～11の値（0が1月）なので、HTMLから取得した月から-1しています。

ソースコード　

解説無しのソースは以下になります。

new_icon.js

var list = document.querySelectorAll('#article_area li');

list.forEach(element => {
    var parent = element.querySelector('span.category');
    var time = element.querySelector('time.created').innerText.split('.');

    // 公開日の日付オブジェクト生成
    var created = new Date();
    created.setFullYear(time[0]);
    created.setMonth(time[1] - 1);
    created.setDate(time[2]);
    created.setHours(0, 0, 0, 0);

    // 今日の日時と1週間後の日時を生成
    var today = new Date(new Date().setHours(0, 0, 0, 0));
    created.setDate(created.getDate() + 7);

    // 公開から1週間以内ならNEWアイコンを付与
    if (created >= today) {
        var icon = document.createElement('span');
        icon.className = 'icon_new';
        icon.innerText = 'NEW';
        parent.after(icon);
    }
});