<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test026_1.html</title>
<style type="text/css">
* {color: #288a50; font-weight:bold; font-family: 나눔고딕코딩; margin-left:auto; margin-right:auto; text-align: center;}
input {font-family: 나눔고딕코딩; font-weight: bold;}
input:focus {background-color: #288a50; color:white;}
.btn {width: 120px; height:35px; font-weight: bold; font-family: 나눔고딕코딩; background-color: #288a50; color: white; border:#288a50;}
.btn:hover {background-color: white; color: #288a50;}
</style>
<script type="text/javascript">
function rdGame()
{
var com = Math.floor(Math.random() * 3) + 1; // 컴퓨터 난수 발생 1~3
var userStr = document.getElementById("userNum").value;
var user = Number(userStr);
if (user>3 || user<1)
{
alert("올바른 숫자를 입력하세요 (1~3)");
return;
}
var res ="";
if ((user==1&&com==3)||(user==2&&com==1)||(user==3&&com==2)) // 유저가 이기는 경우
res = "사용자가 이겼습니다."
else if ((user==1&&com==2)||(user==2&&com==3)||(user==3&&com==1)) //컴퓨터가 이기는 경우
res = "컴퓨터가 이겼습니다."
else
res = "비겼습니다."
// 결과 안내
var ans = "";
document.getElementById("resBox").value = "사용자 : "+ rcp(user)+ " 컴퓨터 : " + rcp(com) + " → " + res;
}
function rcp(val)
{
switch (val)
{
case 1: val="가위"; break;
case 2: val="바위"; break;
case 3: val="보"; break;
}
return val;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!-- w3schools.com / koxo.com 두 사이트 참조하여 난수발생하는 함수 찾기-->
<!--
가위 바위 보 게임을 구현한다.
html, css, javascript 를 활용한다.
또한, 자바스크립트 난수 발생 함수를 찾아 활용한다.
페이지 레이아웃
---------------------------------------------------------
입력(1.가위, 2.바위, 3.보) [ ]<게임 결과 확인>
[ 사용자 : 바위 컴퓨터: 보 → 컴퓨터가 이겼습니다.]
---------------------------------------------------------
-->
<div>
<from>
<div>
입력 (1.가위 / 2. 바위 / 3. 보)    
<input type="text" class="txt" id="userNum" style="width: 30px">
<input type="button" class="btn" value="게임 결과 확인" onclick="rdGame()" style="">
</div>
<div>
<input type="text" class="txt" id="resBox" readonly="readonly" style="width: 600px; height: 30px; border: white;">
</div>
</from>
</div>
</body>
</html>
Test027 - 로또 번호 자동 자판기 - .sort(function(a, b){return a - b}) : 오름차순 정렬
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test027.html</title>
<script type="text/javascript">
function createLotto()
{
//alert("로또~");
document.getElementById("resultArea").value = "";
var count = parseInt(document.getElementById("txtCount").value);
for (var i = 0; i < count; i++)
{
// 로또 1게임 실행 → 함수 호출
//runLottoSingle();
document.getElementById("resultArea").value += runLottoSingle() + "\n";
}
}
// 로또 1게임 실행
function runLottoSingle()
{
// 방 6개로 구성된 배열 생성
var lottoArray = new Array(6);
// 공 45개로 구성된 배열 생성
var arr = new Array(45);
// 1 ~ 45 까지의 로또 번호를 공에 새겨넣기
for (var i = 0; i <= arr.length; i++)
arr[i-1] = i;
// 확인
//alert(arr[9]); //--==>> 10
//alert(arr[40]); //--==>> 41
// 공 뒤섞기
for (var i = 0; i < arr.length; i++) //0~44 -- 사실 몇 번 돌리던 상관은 없음
{
var j = parseInt(Math.random()*45); // 0~44 까지의 정수 형태의 난수 발생
var temp = arr[i]; //┐
arr[i] = arr[j]; //├ 자리 바꾸기 ~
arr[j] = temp; //┘
}
// 확인
// return arr;
// 배열의 요소 옮겨 담기
for (var i = 0; i < lottoArray.length; i++)
lottoArray[i] = arr[i];
// 확인
// return lottoArray;
// 정렬 수행 -- 크기비교해서 자리바꿈
lottoArray.sort(function(a,b){return a-b}); // 그냥 sort() 는 문자 비교 함수
// ------------------------- 기능 재정의 -> 함수 ((익명 함수!!!!))
// (function(left,right){ return Number(left)-Number(right)}) // left, right 는 변수선언 한 것 뿐
// 구성된 배열(최종 결과값 반환)
return lottoArray;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<!--
로또 번호 (1~45)를 중복되지 않은 정수 6개의 형태로 생성하여
출력해주는 페이지를 구현한다.
html, css, javascript 를 활용한다.
또한, 난수 발생 함수를 활용한다.
그리고, 번호순(오름차순) 으로 정렬하여 출력할 수 있도록 한다.
이 과정에서 사용자가 주문한 장 수만큼 출력할 수 있도록 처리한다.
페이지 레이아웃
----------------------------------------------------
로또 [ 3 ] 장 <주문하기>
결과
---------------------- → textarea
1 2 5 6 12 22
6 13 25 35 40 41
2 3 9 11 30 41
----------------------
----------------------------------------------------
-->
<div>
<form>
<div>
로또 <input type="text" class="txt" id="txtCount" style="width: 30px;"> 장
<button type="button" class="btn" onclick="createLotto()">주문하기</button>
</div>
<div>
결과
</div>
<div>
<textarea name="resultarea" id="resultArea" cols="20" rows="30" ></textarea>
</div>
</form>
</div>
</body>
</html>
