<style type="text/css">
body{
font-family:Calibri;
color:#444;
}
table{
background: #ddd;
border-collapse:collapse;
align:center;
}
th,td{
border: 2px groove #fff;
text-shadow: 0px -1px #bbb,1px 1px #fff;
}
td:active{
border-style: solid;
border-color: #aaa #fff #fff #aaa;
}</style>
<?php
$card=array("A"=>array("","269","045","729","467","246","367","945","567"),
"B"=>array("","419","357","067","357","048","349","145","018"),
"C"=>array("","019","145","291","246","329","127","368","915"),
"D"=>array("","245","539","247","079","128","348","368","245"),
"E"=>array("","195","048","529","358","035","025","013","137"),
"F"=>array("","932","025","795","034","012","357","258","356"),
"G"=>array("","693","256","941","309","467","963","678","678"),
"H"=>array("","124","348","136","023","138","498","046","017"),
"I"=>array("","981","068","295","247","916","038","259","157"),
"J"=>array("","509","046","068","056","478","158","236","135"),
);
$a1=array(1,2,3,4,5,6,7,8);
$a2=array_keys($card);
echo "<table id=card border=1 width=30% align=center>\n<tr align=center><td>V\\H</td>\n";
for($itmp=1; $itmp<=10; $itmp++)
{
echo "<td>".$a2[$itmp-1];
}
echo "</td></tr><br>\n";
for($j=1; $j<=8; $j++)
{
echo "<tr align=center><td>$j</td>\n";
for($k=1; $k<=10; $k++)
{
echo "<td>".$card[($a2[$k-1])][$j];
}
echo "</td></tr><br>\n";
}
echo "</table><br>\n";
?>
<table align=center>
<tr>
<td width=50%>
<input type=text onkeyup="javascript:document.getElementById('keyValue').innerHTML=getValue(this.value);" id=pass1><br>
</td>
<td>
<label id=keyValue></label>
</td></tr>
</table>
<script>
function getValue(sKey)
{
var rowsLen,colsLen;
rowsLen = document.getElementById("card").rows.length;
colsLen = document.getElementById("card").rows[1].cells.length;
for(var i=0; i<rowsLen; i++)
{
for(var j=0; j<colsLen; j++)
{
document.getElementById("card").rows[i].cells[j].bgColor = "";
}
}
if(!sKey.match(/^[a-j][1-8][a-j][1-8]$/i))
return "It should like \"D4G7\"";
var t1,t2;
t1 = document.getElementById("card").rows[sKey.charAt(1)].cells[p(sKey.charAt(0))];
t2 = document.getElementById("card").rows[sKey.charAt(3)].cells[p(sKey.charAt(2))];
t1.bgColor = "#32CD00";
t2.bgColor = "#32CD00";
var passValue = t1.innerHTML + t2.innerHTML;
return passValue;
}
function p(c)
{
return (("ABCDEFGHIJ").indexOf(c.toUpperCase()) + 1);
}
document.getElementById("pass1").value="D4G7";
document.getElementById('keyValue').innerHTML=getValue("D4G7");
</script>
