「What's New」では更新マークの自動表示制御をしましたが、
頻繁に訪れない人にとっては最近更新されたものは判りますが、
それ以上前に更新された項目は判りません。
そこで Cookie の仕組みを組合せれば、訪れた人にとっての更新管理ができます。
つまり、最後に訪れた日にちを Cookie として設定しておき、
次回に訪れた時にその間更新された項目に更新マークをつければ良いわけです。
以下のコードはそのような目的のものです。
// 定数&変数 nimg = "new.gif"; // 新規アイコン画像 uimg = "up.gif"; // 更新アイコン画像 expireperiod=1000*60*60*24*365; // 有効期間( msec ) vdname ='ShinSoftCookieVisitD'; // Cookie名 visitday =null; // Cookie 設定関数 function setCookie(name,value,expire){ document.cookie = name + '=' + escape(value) + ((expire==null)?'':('; expires='+expire.toGMTString())); } // Cookie 取得関数 function getCookie(name){ var search = name + '='; if (document.cookie.length>0){ offset = document.cookie.indexOf(search); if (offset != -1){ offset += search.length; end = document.cookie.indexOf(';',offset); if (end == -1) end = document.cookie.length; return unescape(document.cookie.substring(offset,end)); } } return null; } // 訪問日を設定する関数 function setVisitD(){ var today = new Date(); var expires = new Date(); expires.setTime(expires.getTime()+expireperiod); var cy = today.getYear(); if(cy< 70) cy+=2000; if(cy<1900) cy+=1900; var cm = ''+(today.getMonth()+1); var cd = ''+ today.getDate(); if(cm<10) cm='0'+cm; if(cd<10) cd='0'+cd; visitday=''+cy+cm+cd; setCookie(vdname,visitday,expires); vdnewerflag=true; } // 訪問日を取出す関数 function getVisitD(){ if(visitday==null){ if((visitday=getCookie(vdname)) == null){ setVisitD(); } } return visitday; } // 訪問日以降に更新されているかをチェックする関数 function compareToday(y,m,d){ var vd = getVisitD(); if(y< 70) y+=2000; if(y<1900) y+=1900; var md = ''+y+((m<10)?'0':'')+m+((d<10)?'0':'')+d; if(md >= vd) return 1; return -1; } // 更新管理関数 function WhatsNew4U(sy,sm,sd,k){ var s=''; if(compareToday(sy,sm,sd)>0){ var alt=sy+'.'+sm+'/'+sd; s = '<img src="'+((k=='n')?nimg:uimg) + '" alt="'+alt+'" title="'+alt+'" height=16>'; } return s; }
この文字の部分は必要に応じて修正します。
nimg, uimgは
前回の訪問日から更新されている項目に表示する新規項目用と更新項目用のアイコン画像の指定です。
expireperiod は Cookie の有効期限です。
その人が訪問した日を記憶しておく Cookie をどれくらいの期間保存しておくか
msec 単位で指定します。
vdname は保存する Cookie の名称です。
生成した Cookie が他の Cookie 情報と混在しないように固有の名称を付けます。
WhatsNew4U関数内の alt変数 は画像にマウスが触れた時に
表示される Tip 表示用の文字列で、このサンプルでは「yyyy.mm/dd」の形式になっています。
必要に応じて修正します。
また、s変数の設定は IMG タグの成形ですが、
画像サイズ( height指定 )など必要に応じて修正します。
更新マークは WhatsNew4U関数を呼び出した結果を document.write することで行います。
この関数の呼出形式を以下に示します。
WhatsNew4U(sy,sm,sd,k); sy,sm,sd : 更新日。各変数はそれぞれ「西暦年(4桁)」「月」「日」 k : 更新マークの種別 'n' : 新規 'u' : 更新
使用方法
訪問日を更新するには、単に setVisitD() 関数を呼び出すだけです。
更新マークの表示は、マークを必要とする場所で WhatsNew4U() 関数を呼出します。
●HTML書法 Tips集 <script language="JavaScript"><!-- WhatsNew4U(1997,4,20,'n'); // --></script> ●JavaScript Tips集 <script language="JavaScript"><!-- WhatsNew4U(1997,12,20,'u'); // --></script>
結果
サンプルはこちら。
注意事項
f(^^;