圖 形 輸 入 密 碼 範 例
請 輸 入 密 碼
顯示數字

ATM密碼輸入

檔案下載 : 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31  32  33  34  35  36

將下列程式碼複製至<head>程式碼</head>區內

<form name=form1>
<input type=hidden name=pwd value="">
<input type=hidden name=chk value="0">
</form>
<center>
<table border=0 cellpadding=0 cellspacing=0><tr><td bgcolor=#000000>
<table border=0 cellpadding=0 cellspacing=1><tr><td bgcolor=#c0c0c0 height=20>
<div>圖 形 輸 入 密 碼 範 例</div>
</td></tr><tr><td bgcolor=#909090>
<table border=0 cellpadding=0 cellspacing=1><tr><td bgcolor=#606060>
<table border=0 cellpadding=10 cellspacing=0><tr><td>
<table border=0 cellpadding=0 cellspacing=0><tr>
<td rowspan=4 width=100 align=center>
<table border=0 cellpadding=0 cellspacing=0><tr>
<td colspan=4 height=30><font color=#dddddd>請 輸 入 密 碼</font></td>
</tr><tr>
<td><img name=pwd1 src=./pwd_t.gif width=21 height=23 border=0></td>
<td><img name=pwd2 src=./pwd_t.gif width=21 height=23 border=0></td>
<td><img name=pwd3 src=./pwd_t.gif width=21 height=23 border=0></td>
<td><img name=pwd4 src=./pwd_t.gif width=21 height=23 border=0></td>
</tr><tr>
<td colspan=4 height=30><a href="javascript:chk();" class=atm><img name=chk src=./chk_0.gif border=0 align=texttop>
顯示數字</a></td>
</tr></table>
</td>
<td><a href="javascript:press('7');" onmouseover="up('7');" onmouseout="dn('7');"><img name=atm7 src=./atm_70.gif width=23 height=24 border=0></a></td>
<td><a href="javascript:press('8');" onmouseover="up('8');" onmouseout="dn('8');"><img name=atm8 src=./atm_80.gif width=23 height=24 border=0></a></td>
<td><a href="javascript:press('9');" onmouseover="up('9');" onmouseout="dn('9');"><img name=atm9 src=./atm_90.gif width=23 height=24 border=0></a></td>
</tr><tr>
<td><a href="javascript:press('4');" onmouseover="up('4');" onmouseout="dn('4');"><img name=atm4 src=./atm_40.gif width=23 height=24 border=0></a></td>
<td><a href="javascript:press('5');" onmouseover="up('5');" onmouseout="dn('5');"><img name=atm5 src=./atm_50.gif width=23 height=24 border=0></a></td>
<td><a href="javascript:press('6');" onmouseover="up('6');" onmouseout="dn('6');"><img name=atm6 src=./atm_60.gif width=23 height=24 border=0></a></td>
</tr><tr>
<td><a href="javascript:press('1');" onmouseover="up('1');" onmouseout="dn('1');"><img name=atm1 src=./atm_10.gif width=23 height=24 border=0></a></td>
<td><a href="javascript:press('2');" onmouseover="up('2');" onmouseout="dn('2');"><img name=atm2 src=./atm_20.gif width=23 height=24 border=0></a></td>
<td><a href="javascript:press('3');" onmouseover="up('3');" onmouseout="dn('3');"><img name=atm3 src=./atm_30.gif width=23 height=24 border=0></a></td>
</tr><tr>
<td><a href="javascript:press('0');" onmouseover="up('0');" onmouseout="dn('0');"><img name=atm0 src=./atm_00.gif width=23 height=24 border=0></a></td>
<td colspan=2><a href="javascript:fix();" onmouseover="up('f');" onmouseout="dn('f');"><img name=atmf src=./atm_f0.gif width=46 height=24 border=0></a></td>
</tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</center>

將下列程式碼複製至<body 程式碼>的標籤之中

onload="fix();"

下列程式碼複製至<body>程式碼</body>之間

<script>
function chk(){
eval('document.form1.chk.value') == "0" ? showpwd(1) : showpwd(0);
}
function showpwd(n){
document.body.focus();
document.form1.chk.value=n
eval('document.chk.src="./chk_'+n+'.gif"');
var newpwd = document.form1.pwd.value
for ( var i=1; i<(newpwd.length+1); i++ ){

if (document.form1.chk.value=="1"){
var subpwd = newpwd.substring(i-1,i);
eval('document.pwd'+i+'.src="./pwd_'+subpwd+'.gif"');
}else{
eval('document.pwd'+i+'.src="./pwd_h.gif"');
}
}
}
function press(n){
document.body.focus();
if (document.form1.pwd.value.length < 4){
document.form1.pwd.value=document.form1.pwd.value+n;
if (document.form1.chk.value=="1"){
eval('document.pwd'+document.form1.pwd.value.length+'.src="./pwd_'+n+'.gif"');
}else{
eval('document.pwd'+document.form1.pwd.value.length+'.src="./pwd_h.gif"');
}
}
if (document.form1.pwd.value.length == 4){
alert(document.form1.pwd.value);
return;
}
}
function fix(){
document.form1.pwd.value="";
for ( var i=1; i<5; i++ ){
eval('document.pwd'+i+'.src="./pwd_t.gif"');
}
document.body.focus();
}
function up(u){
eval('document.atm'+u+'.src="./atm_"+u+"1.gif"');
}
function dn(d){
eval('document.atm'+d+'.src="./atm_"+d+"0.gif"');
}
</script>