◇プログラムファイルと画像のダウンロード
画像ファイルをダウンロードして実行するHTMLと同じフォルダに保存してください。
一括ダウンロードファイル： card.lzh
（プログラムファイル １個、画像ファイル １０個）
◇<body>〜</body>タグ間の編集
<body>〜</body>タグ間の『ID Card』を表示する場所に次の赤字の部分を挿入してください。幅１５０ピクセルの表になっています。クッキーのキーワードを変える場合はプログラムファイルの８行目の変数を変更してください。
<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();
}
|
|
