<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#out{
position: absolute;
top: 50px;
border: 1px solid gray;
width: 300px;
height: 200px;
padding-left: 10 10px;
background-color: #ffc;
font-size: 11pt;
}
</style>
<script type="text/javascript">
var rnd;
var cnt=0;
window.onload=function(){
rnd=parseInt(Math.random()*100)+1;
}
function check(su) {
/* su를 파라메타값으로 넘김 */
//숫자를 이미지로 변환해서 출력
if(su<10)
{
imge[0].src='../num/'+su+'.gif';
imge[1].src='';
}
else if(su>=10 && su<=99)
{
var n=parseInt(su/10); //두자리 숫자중에서 처음숫자를 정수형으로 추출
var n2=su%10; //두번째 숫자 추출..su를 10으로 나누었을 때 나머지 수
console.log(n+","+n2); //콘솔에 출력
imge[0].src='../num/'+n+'.gif';
imge[1].src='../num/'+n2+'.gif';
} else{
alert("잘못 입력했어요");
frm.num.value=''; //초기값
frm.num.focus();
return false;
}
//난수와 숫자를 비교해서 결과출력
cnt++;
if(su>rnd)
out.innerHTML+=cnt+":"+su+"보다 작습니다<br>"; //out.innerHTML+= 값 누적
else if(su<rnd)
out.innerHTML+=cnt+":"+su+"보다 큽니다<br>";
else
{
out.innerHTML="<h3>축하합니다~ 정답은 "+rnd+"입니다</h3>";
imge[0].src="../image/b05.png";
imge[1].src="";
return false;
}
//회수 초과에 관한 조건문..5회
if(cnt>=10){
out.innerHTML="<h3>다음 기회에..<h3>";
imge[0].src="../image/b05.png";
imge[1].src="";
return false;
}
frm.num.value='';
frm.num.focus();
}
</script>
</head>
<body>
<form action="" name="frm" onsubmit="return false">
<b>숫자입력: </b>
<!-- 숫자를 입력하고 엔터onkeydown를 누르면 함수를 호출하며 값 전달 -->
<input type="text" name="num" size="5" onkeydown="if(event.keyCode==13) check(value)">
</form>
<div id="out"></div> <!-- 출력용 -->
<div style="position: absolute; top: 80px; left: 350px;">
<!-- 배열로 할 때는 같은 이름을 공간 확보하고 배열로 이름 다르게 -->
<img alt="" src="" name="imge">
<img alt="" src="" name="imge">
</div>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 210927_image,setAttribute(array) (0) | 2021.09.27 |
|---|---|
| 210924_window.open/close,버튼,opener (0) | 2021.09.24 |
| 210924_setTimeout,setInterval,버튼,이미지 (0) | 2021.09.24 |
| 210924_radio,checkbox,innerHTML,span (0) | 2021.09.24 |
| 210924_배열,랜덤숫자-이미지(연결되어 출력) (0) | 2021.09.24 |