法則65 一定時間で自動的に消えるNewマークを付ける

Newマークを表示するJavaScript【1】

// passage time
var pass = 24;
// display content
var content = 'New!!';
var currentDate = new Date();
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' || spans[i].getAttribute('className') == 'new') {
        time = spans[i].childNodes[0].nodeValue.split(":");
        var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
        var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000);
        now = Math.ceil(now);
        if(-now <= pass){
            spans[i].innerHTML = content;
            spans[i].style.display = 'inline';
        }
    }
}

不要な部分

//最初の2行
<script type="text/javascript">
<!--
//最後の2行
//-->
</script>

表示期間を設定する【2】

// passage time
var pass = 168;

テキストではなく画像を表示する【3】

// display content
var content = '<img src="http://example/img/new.gif" alt="New" />';

JavaScriptを読み込む（X）HTMLソース【4】

<script type="text/javascript" src="/js/newmarks.js"></script>
</body>
</html>

Newマークを表示するテンプレートソース【5】

<MTEntries lastn="15">
<MTEntriesHeader><dl></MTEntriesHeader>
<dt><span class="new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span><$MTEntryDate format="%Y.%m.%d"$></dt>
<dd><a href="<$MTEntryLink$>"><$MTEntryTitle$></a></dd>
<MTEntriesFooter></dl></MTEntriesFooter>
</MTEntries>

Newマークのデザインを決めるCSSソース

span.new {
    display: none;
    color: red;
}

Newマークの縦位置を調整するCSSソース

span.new img {
    vertical-align: middle;
}

リンク

Newマークを表示するためのスクリプト ： 小粋空間

• 第4章 Webサイトの価値を高めるデザインの法則