自動で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="2025-04-04">2025/04/04</time>
<p>今日</p>
<time datetime="2025-03-28">2025/03/28</time>
<p>1週間前</p>
<time datetime="2025-03-05">2025/03/05</time>
<p>1か月前</p>
<time datetime="2024-10-04">2024/10/04</time>
<p>半年前</p>
<time datetime="2024-04-04">2024/04/04</time>
<p>1年前</p>
サンプル
フィードバック
自動でNEWマークを表示 サンプルにつきまして、動作しない環境がありましたらご報告ください。
