<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript">
<!--
window.onload=function(){
var id = document.getElementsByName("id")[0];
// onkeyup:키보드의 키를 눌렀다가 놓을때 발생
id.onkeyup=callKey;
ch(0);
}
var td = document.getElementsByTagName("td");
var i=0;
function callKey(){
// event:자바스크립트 내장
// keyCode:해당 키보드의 고유한 code값
// enger:13 <-:37 위로:38 ->:39 아래:40
//0 1 2
//3 4 5
//6 7 8
if(event.keyCode==13){
this.value="입력완료";
}
if(event.keyCode==38){ // 위
if(i!=0&&i!=1&&i!=2){
i=i-3;
ch(i);
}
}
if(event.keyCode==37){ // 왼
if(i!=0&&i!=3&&i!=6){
i=i-1;
ch(i);
}
}
if(event.keyCode==39){ // 오
if(i!=2&&i!=5&&i!=8){
i=i+1;
ch(i);
}
}
if(event.keyCode==40){ // 아래
if(i!=6&&i!=7&&i!=8){
i=i+3;
ch(i);
}
}
}
function ch(k){
for(var j=0;j<9;j++){
if(j==k)
td[j].bgColor="yellow";
else
td[j].bgColor="";
}
}
//-->
</script>
</head>
<body><center>
ID:<input type="text" name="id"/>
<table width="200" height="200" border>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
'IT > Html' 카테고리의 다른 글
| 사다리 게임 html (0) | 2015.01.23 |
|---|---|
| html 마우스 클릭으로 그림 맞추기 게임 (1) | 2015.01.14 |
| html을 이용한 주사위 게임. (0) | 2015.01.14 |