問題
解決策
最新の内容であることを示す。
Newをお知らせやブログ以外でも好きな場所に自由に付けさせることで、内容が最新であることを視覚的に示すことができるため、サイト上で特定のコンテンツをPRする手法が増えるのではないでしょうか。
今回は任意の要素にnewを付ける方法をご紹介します。
こちらは以下の記事の応用版となります。
事前にご覧ください。
javascriptで7日以内のお知らせにnewを付ける
DEMOはこちら
このブロックにはnewが付きます。
このブロックにはnewが付きません。
特定のクラスを持った要素に対し、newを付けるか否かを判定させる。
特定のクラスを決めて、そのクラスを持つ要素に対してnewを付けるか否かの判定をさせます。
ここでは例として、クラス「newjudge」を判定対象とします。
独自属性「timer」の設定
クラス「newjudge」には、独自属性「timer」を付与させます。
「timer」には、西暦4桁、月2桁（0を含む） 、日2桁（0を含む）の8桁を記述します。
- ※例：西暦2020年2月23日の場合 … 20200223
- ここに設定した日付を基準に、いつからいつまでnewを表示させるかを決定させます。
- newを表示させる場合は、クラス「new」を付与させます。
- 今回は例として、ここに設定した日付から7日間、newが付く記述を行います。
HTML
要素にクラス「newjudge」と独自属性「timer」を設定します。
独自属性「timer」には、任意の日付を8桁で入力します。
<div class="newjudge" timer="20200223">
<p class="text">テキスト</p>
</div>CSS
クラス「newjudge」にクラス「new」が付与されていた場合のnewを表示させるCSSを構築します。
.newjudge.new{
position: relative;
}
.newjudge.new:before{
content: "NEW";
display: inline-block;
margin-left: 5px;
padding: 1px 10px;
font-size: 87.5%;
color: #F15A24;
background-color: #ffffff;
border: 1px solid #F15A24;
position: absolute;
top: 0;
right: 0;
}javascript
JavascriptでNEWを付けるには、以下の手順で行います。
- クラス「newjudge」の要素の独自属性「timer」の値を取得します。
- 独自属性「timer」の値を日付形式に変換し、現在の日付と比較します。
「設定した日付 – 現在の日付」が0以上、7以内なら、クラス「new」を付けます。
if($('.newjudge').length){
$('.newjudge').each(function() {
var timer = $(this).attr('timer'); // 日付を付与させた"timer"属性の値を抽出
timer = new Date( timer.substr(0, 4), timer.substr(4, 2)-1, timer.substr(6, 2) );
now = new Date(); // 現在の日付を取得
var dif = (now - timer) / 86400000;
if(0 <= dif && dif <= 7){ // 設定した日付が現在の日付から7日以内ならば
$(this).addClass('new'); // "new"クラスを付与
};
});
}
- 「getMonth」は0から始まるため（0 = 1月）、「+1」を行う必要があります。
- 独自属性「timer」を取得し、sliceを使用して、日付形式へと変換します。
- 「(now – timer) / (1000 * 24 * 3600)」という風に「1000（ミリ秒） * 24（時間） * 3600（時分）」（86400000）で割ることで、差分の日数を取得することができます。
- 差分の日数が0以上、7以内ならば、クラス「newjudge」にクラス「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] ２つの日付の差を日数で求める | コピペで使える JavaScript逆引きリファレンス】
https://javascript.programmer-reference.com/js-date-term/
コメント