..



 ■ HomeJavaScriptサンプル集〔基本編〕−クッキー(ID Card)

JavaScript 無料のフリースクリプト集...

- ID Card -
Browser:--
version:--
OS:--
count:--
class:--
----/--/--(---)
ID Card

 このサイトのトップページメニューに埋め込まれている、『ID Card』を作成します。
訪問者のブラウザの種類とバージョン、OS、日付、訪問回数と訪問回数による役職表示と、ID Cardの写真にあたる部分に画像を表示します。
各情報の表示方法はHPアクセサリーの各ページを、訪問回数と役職表示については クッキー−訪問回数で出世(役職表示&画像付き)を参照してください。

研修生
研修生
新入社員
新入社員
係員
係員
主任
主任
係長
係長
課長
課長
部長
部長
常務
常務
専務
専務
社長
社長


 HPでの使用方法
プログラムファイルと画像のダウンロード

 画像ファイルをダウンロードして実行するHTMLと同じフォルダに保存してください。

一括ダウンロードファイルcard.lzh
(プログラムファイル 1個、画像ファイル 10個)

<body>〜</body>タグ間の編集


 <body>〜</body>タグ間の『ID Card』を表示する場所に次の赤字の部分を挿入してください。幅150ピクセルの表になっています。クッキーのキーワードを変える場合はプログラムファイルの8行目の変数を変更してください。

<table width="150" border="1" cellspacing="0" cellpadding="1">
  <tbody>
    <tr>
      <td valign="top">
      <div align="center" style="font-size: 12px; color: rgb(102,102,102);">- ID Card -</div>
      <div id="br_brows" style="font-size: 11px; color: rgb(102,102,102);">Browser:--</div>
      <table cellpadding="0" cellspacing="0" border="0" style="text-align: left; width: 100%;">
        <tbody>
          <tr>
            <td style="vertical-align: top; width: 60%;">
              <div id="br_vers" style="font-size: 11px; color: rgb(102,102,102);">version:--</div>
              <div id="br_os" style="font-size: 11px; color: rgb(102,102,102);">OS:--</div>
              <div id="visitTimes" style="font-size: 11px; color: rgb(102,102,102);">count:--</div>
              <div id="visitLevel" style="font-size: 11px; color: rgb(102,102,102);">class:--</div>
            </td>
            <td style="vertical-align: middle; width: 40%;">
              <div align="center">
              <img src="#" width="32" height="32" border="1" name="cardPic">
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div id="br_day" style="font-size: 11px; color: rgb(102,102,102);" align="right">
      ----/--/--(---)</div>
      <script type="text/javascript" src="card.js"></script>
      </td>
    </tr>
  </tbody>
</table>



プログラムファイル(card.js)
var lev=["研修生","新入社員","係員","主任","係長","課長","部長","常務","専務","社長"];
var cou=[0,10,25,40,60,80,110,140,170,200];
var wn=["sun","mon","tue","wed","thu","fri","sat"];
if(lev.length!=cou.length)
{
   alert("JavaScript Error!\n配列levとcouの要素数が違います\n+1JavaScript");
}else{
   var key="idcardacces";
   var n=getCookie(key);
   if(n==""){n=0}
   for(var i=cou.length;i>=0;i--)
   {
     if(n>=cou[i]){break;}
   }
   document.images["cardPic"].src="cl"+i+".gif";
   document.getElementById("visitLevel").innerHTML="class:"+lev[i];
   document.getElementById("visitTimes").innerHTML="count:"+n;
   n++;
   setCookie(key,n);
}
   var brText=window.navigator.appName;
   if(brText.charAt(0)=="N"){brText+=" Navigator";}
   document.getElementById("br_brows").innerHTML=brText;
   var vs=window.navigator.appVersion.slice(0,3);
   var vsText="version:--";
   if(vs=="4.0"){vsText="version:5 or 6"}
   if(vs=="3.0"){vsText="version:3[6以上にバージョンアップしてください]";}
   if(vs=="4.7"){vsText="version:4[6以上にバージョンアップしてください]";}
   if(vs=="5.0"){vsText="version:6 or 7";}
   document.getElementById("br_vers").innerHTML=vsText;
   document.getElementById("br_os").innerHTML="OS:"+window.navigator.platform;
   var dt=new Date();
   var dy=dt.getYear();
   var dm=dt.getMonth()+1;
   var dd=dt.getDate();
   var dw=dt.getDay();
   if(dy<2000){dy+=1900;}
   document.getElementById("br_day").innerHTML=dy+"/"+dm+"/"+dd+"("+wn[dw]+")";
function getCookie(key)
{
   var s,e;
   var c=document.cookie+";";
   var b=c.indexOf(key,0);
   if(b!=-1)
   {
     c=c.substring(b,c.length);
     s=c.indexOf("=",0)+1
     e=c.indexOf(";",s);
     return(unescape(c.substring(s,e)));
   }
   return("");
}
function setCookie(key,n)
{
   var myDate=new Date();
   myDate.setTime(myDate.getTime()+6*30*24*60*60*1000);
   document.cookie=" "+key+"="+escape(n)+"; expires="+myDate.toGMTString();
}


..

..


..