自動で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-11-21">2024/11/21</time>
<p>今日</p>
<time datetime="2024-11-14">2024/11/14</time>
<p>1週間前</p>
<time datetime="2024-10-22">2024/10/22</time>
<p>1か月前</p>
<time datetime="2024-05-23">2024/05/23</time>
<p>半年前</p>
<time datetime="2023-11-22">2023/11/22</time>
<p>1年前</p>
サンプル
