問題 × 解決策

javascriptで7日以内のお知らせにnewを付ける

問題

javascriptで7日以内のお知らせにnewを付けるには?

解決策

掲載日付を独自属性に「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)

参考ページ

【JavaScriptで月日を2桁表示にするスマートな方法 ~ digitra】
http://www.digitra.net/2016/02/javascript.html

【[JavaScript] 2つの日付の差を日数で求める | コピペで使える JavaScript逆引きリファレンス】
https://javascript.programmer-reference.com/js-date-term/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

2 × 5 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧