自動でNEWマークを表示

更新日時と対象期間を比較し自動でNEWを表示

更新日時が14日以内であればNEW。

jQuery

$(function () { $('time').each(function(){ // 現在日時 var current = new Date(); // 14日(2週間)前のミリ秒 var range_ms = current.getTime() - (14 * 24 * 60 * 60 * 1000); // 更新日時 var modified = new Date($(this).attr('datetime')); // 更新日時のミリ秒 var modified_ms = modified.getTime(); if (range_ms < modified_ms){ $(this).after('<span>NEW</span>'); } }); });

非jQuery版

JavaScript

window.addEventListener('load', function() { var elem_time = document.getElementsByTagName('time'); for (i = 0; i < elem_time.length; i++) { // 現在日時 var current = new Date(); // 14日(2週間)前のミリ秒 var range_ms = current.getTime() - (14 * 24 * 60 * 60 * 1000); // 更新日時 var modified = new Date(elem_time[i].getAttribute('datetime')); // 更新日時のミリ秒 var modified_ms = modified.getTime(); if (range_ms < modified_ms){ var elem_span = document.createElement('span'); elem_span.textContent = 'NEW'; elem_time[i].after(elem_span); } } });

new Date()はIE8以下では使用不可。

HTML

<time datetime="2024-03-29">2024/03/29</time> <p>今日</p> <time datetime="2024-03-22">2024/03/22</time> <p>1週間前</p> <time datetime="2024-02-28">2024/02/28</time> <p>1か月前</p> <time datetime="2023-09-29">2023/09/29</time> <p>半年前</p> <time datetime="2023-03-30">2023/03/30</time> <p>1年前</p>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について