HTMLのtime要素を機軸にjQueryで2週間前までの記事に「NEW」を表示させます。
Movable Type(ウィジェットセット)
<time datetime="<$mt:EntryDate format="%Y-%m-%d"$>"><$mt:EntryDate format="%m/%d"$></time><br>
HTML
<section class="post" id="news"> <h2>NEWS</h2> <ol> <li><time datetime="2015-10-02">10/02</time><br> <a href="http://www.navi-pet.com/blog/2015/10/post-50.html"><span class="title">穀物でも身体に優しい、ヤラーのドッグフード</span></a></li> <li><time datetime="2015-10-02">10/02</time><br> <a href="http://www.navi-pet.com/blog/2015/10/post-49.html"><span class="title">グレインフリーでカロリー控えめ!ピナクル ダック&ポテトのドッグフード</span></a></li> <li><time datetime="2015-10-02">10/02</time><br> <a href="/ranking/#blog000072"><span class="title">おすすめ商品「ラムやターキーと、肉の種類も豊富。ネイチャーズバラエティ!」追加</span></a></li> <li><time datetime="2015-09-18">09/18</time><br> <a href="http://www.navi-pet.com/blog/2015/09/post-47.html"><span class="title">何を基準に選べばいい?ドッグフードのタイプ別特徴</span></a></li> <li><time datetime="2015-09-09">09/09</time><br> <a href="/ranking/#blog000070"><span class="title">おすすめ商品「オリジン・パピー」追加</span></a></li> </ol> </section>
jQuery
<script> $(function() { var after = 14; after = after*24*60*60*1000; now = new Date(); $('time').each(function() { var lists = $(this).attr('datetime'); var times = lists.replace(/^(\d+)-(\d+)-(\d+)$/,"$1,$2,$3"); times = times.split(","); var settime = new Date(times[0],times[1]-1,times[2]); end = new Date(settime.getTime()+after); if(now < end) { $(this).append('<span class="new">NEW</span>'); } }); }); </script>
【参考】jQueryで新着情報に一定期間内だけNewを表示する
jQueryの詳細解説は上記サイトでご覧下さい。
参考サイトとの違いですが、
datetime属性を使用しているところです。
time要素に datetime=”” を追加すると、日付や時刻を属性値で指定することができます。
I used to be suggested this blog by means of my cousin. I’m now not positive whether this put up is written through him as nobody else recognise such particular about my problem. You’re incredible! Thank you!
It’s actually very difficult in this full of activity life to listen news on Television, so I simply use web for that purpose, and take the most up-to-date news.