ページの装飾に関するTips


・What's New - 更新日管理

NN2Unknown NN3OK NN4OK MozillaOK IE3OK IE4OK

ページを更新する場合、新しく追加したものや内容を更新したものなどを強調するために、 イメージなどでマークをすることがよくありますが、 いつまでマークをしておくべきでしょうか?

実際には、次回の更新までそのままのケースが多いのではないでしょうか。

然し、更新間隔が頻繁でないとかなり古い項目が新規のままであったり、 次回の更新日にマークを更新し忘れたりしがちです。

そのような場合に JavaScript で更新日付を管理し、 一定時間経つとマークが消えるようにすると楽です。

以下のコードはそのような目的のものです。

<head>
    :
<script language="JavaScript"><!--
nwIcon = 'new.gif';  // 新規項目の画像
upIcon = 'up.gif';   // 更新項目の画像
function WhatsNew(sy,sm,sd,y,m,d,k){
  // sy,sm,sd : 更新日の年(sy)、月(sm)、日(sd)
  //  y, m, d : 有効日の年( y)、月( m)、日( d)
  //  k       : 種別 'nw' = 新規, 'up' = 更新
  var td = new Date(y,m-1,d), nd = new Date();
  if(td.getTime()>nd.getTime()){
    var icon = (k=='nw')?nwIcon:upIcon;
    var cmt  = sm+'/'+sd;
    var s='<img src="'+icon+'" alt="'+cmt+'" title="'+cmt+'" '
         +'border=0 width=35 height=12'+'>';
    document.write(s);
  }
}
// --></script>
</head>
<body ...>
    :
<a href="WhatsNew.htm">What's New - 更新日管理
<script language="JavaScript"><!--
WhatsNew(2001,4,9,2001,5,8,'up'); // --></script></a>
    :

この文字の部分は必要に応じて修正します。

nwIcon は新規項目用の画像ファイルで upIcon は更新項目用の画像ファイルです。 これらのファイルは同じサイズのものを用意し、WhatsNew関数で出力する IMGタグの width,height属性の値も一致させます。

WhatsNew 関数は BODYタグ内で使用し、呼出形式は以下の通りです。

WhatsNew(sy,sm,sd,y,m,d,k);
sy,sm,sd : 更新日( sy = 西暦年, sm = 月[1-12], sd = 日[1-31] )
y, m, d  : 有効期限( y = 西暦年, m = 月[1-12],  d = 日[1-31] )
k        : マークの種類( 'nw' = 新規項目, 'up' = 更新項目 )

使用方法


注意事項

caution
このサンプルは指定した期間内であれば更新マーク(画像)を表示し、 そうでなければ何も表示しませんが、 更新日などを表示したい場合は、WhatsNew 関数を以下のようにします。

function WhatsNew(sy,sm,sd,y,m,d,k){
  // sy,sm,sd : 更新日の年(sy)、月(sm)、日(sd)
  //  y, m, d : 有効日の年( y)、月( m)、日( d)
  //  k       : 種別 'nw' = 新規, 'up' = 更新
  var td = new Date(y,m-1,d), nd = new Date();
  var cmt  = sm+'/'+sd;
  if(td.getTime() > nd.getTime()){
    var icon = (k=='nw')?nwIcon:upIcon;
    var s='<img src="'+icon+'" '
         +'alt="'+cmt+'" title="'+cmt+'" '
         +'border=0 width=35 height=12'+'>';
    document.write(s);
  }
  else {
    document.write(cmt);
  }
}


カスタマイズは色々とできると思いますので、 自分のページにあった出力をするように修正してみてください。 f(^^;

Copyright(c) 1998 - 2001 ShinSoft. All rights reserved.