問題
解決策
掲載日付を独自属性に「Ymd（Y…西暦の年4桁、m…月2桁（1~9月は頭に0を付ける）、日2桁（1~9日は頭に0を付ける））」を設定しておき、日付形式に変換させて、「掲載日付 - 現在の日付」が7未満、0以上なら、new用のclassを付与する。
掲載日付を独自属性に設定
Javascriptで7日以内のお知らせにNEWを付けるには、以下の手順で行います。
- 掲載日付を独自属性に設定する。設定する際は西暦4桁、月2桁（0を含む） 、日2桁（0を含む）の8桁で行います。
- ※例：西暦2020年1月9日の場合 … 20190109
- 掲載日付を日付形式に変換し、現在の日付と比較します。
「掲載日付 – 現在の日付」が0以上、7以内なら、クラス「new」を付ける。
7日以内のお知らせにNEWを付ける記述例
DEMOはこちら
- 2020年00月00日 カテゴリ お知らせタイトル
-
ここにはnewは付きません。例として、15日前を掲載日付として表示しています。
- 2020年00月00日 カテゴリ お知らせタイトル
-
ここには常にnewが付きます。例として、今日を掲載日付として表示しています。
HTML
<dl class="news-list clearfix">
<dt timer="20190109">
<span class="times">2020年01月09日</span>
<span class="cat">カテゴリ</span>
<span class="titles">お知らせタイトル</span>
</dt>
<dd>
<div class="text clearfix">
<p>お知らせ内容が入ります。お知らせ内容が入ります。お知らせ内容が入ります。</p>
</div>
</dd>
</dl>CSS
.news-list > dt{
margin-bottom: 0;
}
.news-list > dt .times{
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-bottom: 10px;
font-size: 93.75%;
}
.news-list > dt .cat{
display: inline-block;
vertical-align: middle;
margin-right: 10px;
margin-bottom: 10px;
padding: 1px 10px;
color: #ffffff;
font-size: 87.5%;
background-color: #F15A24;
}
.news-list > dt .titles{
display: block;
font-weight: bold;
}
.news-list > dt.new .titles:after{
content: "NEW";
display: inline-block;
vertical-align: middle;
margin-left: 5px;
padding: 1px 10px;
font-size: 87.5%;
color: #F15A24;
border: 1px solid #F15A24;
}
.news-list > dd{
margin-bottom: 20px;
}
javascript
// 本日の日付の取得
var dt = new Date(); // 本日の日付のデータの格納
var y = String(dt.getFullYear()); // ↑から、年の値を抽出
var m = String(("00" + (dt.getMonth()+1)).slice(-2)); // ↑から、月の値を抽出
var d = String(("00" + dt.getDate()).slice(-2)); // ↑から、日の値を抽出
if($('.news-list dt').length){
$('.news-list dt').each(function() {
var timer = $(this).attr('timer'); // 投稿日時を付与させた"timer"属性の値を抽出
timer = new Date( timer.substr(0, 4), timer.substr(4, 2)-1, timer.substr(6, 2) );
nows = new Date( y, String(Number(m)-1), d );
var dif = (nows - timer) / (1000 * 24 * 3600);
if(0 <= dif && dif <= 7){ // 投稿日時が現在の日時から7日以内ならば
$(this).addClass('new'); // "new"クラスを付与
};
});
}
- 「getMonth」は0から始まるため（0 = 1月）、「+1」を行う必要があります。
- 月日ともに、「(“00” + ～).slice(-2)」という形で値を取得することで、2桁（0を含む）にすることができます。（「slice」のマイナス値は「最後から〇文字」という解釈となります）
- 独自属性として「timer」を事前に設定しておき、sliceを使用して、日付形式へと変換します。
- 「(now – timer) / (1000 * 24 * 3600)」という風に「1000（ミリ秒） * 24（時間） * 3600（時分）」（86400000）で割ることで、差分の日数を取得することができます。
- 差分の日数が0以上、7以内ならば、dtタグにクラス「new」を付与します。
- もし14日以内としたい場合は、「<= 7」の部分を「<= 14」に書き換えてください。
ポイント!
2つの日付の差分は、「1000（ミリ秒） * 24（時間） * 3600（分秒）」（86400000）で割ることで取得することができます。
( Aの日付 – Bの日付 ) / (1000 * 24 * 3600)
参考ページ
【Date.prototype.getMonth() – JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth
【JavaScriptで月日を２桁表示にするスマートな方法 ~ digitra】
http://www.digitra.net/2016/02/javascript.html
【Array.prototype.slice() – JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
【[JavaScript] ２つの日付の差を日数で求める | コピペで使える JavaScript逆引きリファレンス】
https://javascript.programmer-reference.com/js-date-term/
コメント