s19_practice.html
내답
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습</title>
<script type="text/javascript">
/*
[실습]
국어,영어,수학을 입력 받아서 총점, 평균을 구하여 출력.
[유효성 체크]
1.국어,영어,수학 필수 입력
2.숫자만 입력
3.0~100 값만 입력
[출력]
국어,영어,수학,총점,평균 출력 (div에다가)
*/
window.onload = function() {
const form = document.getElementById('register_form');
const confirmBtn = document.getElementById('confirm_btn');
confirmBtn.onclick = function() {
const korean = document.getElementById('korean');
if (korean.value.trim() == '' || isNaN(korean.value) || korean.value < 0 || korean.value > 100) {
alert('국어점수를 필수로 입력하세요! 그리고 0~100사이의 숫자만 입력 가능합니다.');
korean.value = ''; // 공백이 있을 경우 공백 제거
korean.focus();
return false;
}
const english = document.getElementById('english');
if (english.value.trim() == '' || isNaN(english.value) || english.value < 0 || english.value > 100) {
alert('영어점수를 필수로 입력하세요! 그리고 0~100사이의 숫자만 입력 가능합니다.');
english.value = ''; // 공백이 있을 경우 공백 제거
english.focus();
return false;
}
const math = document.getElementById('math');
if (math.value.trim() == '' || isNaN(math.value) || math.value < 0 || math.value > 100) {
alert('수학점수를 필수로 입력하세요! 그리고 0~100사이의 숫자만 입력 가능합니다.');
math.value = ''; // 공백이 있을 경우 공백 제거
math.focus();
return false;
}
const sum = Number(korean.value) + Number(english.value) + Number(math.value);
const average = sum / 3;
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '국어: ' + korean.value + '<br>' +
'영어: ' + english.value + '<br>' +
'수학: ' + math.value + '<br>' +
'총점: ' + sum + '<br>' +
'평균: ' + average.toFixed(2);
return false; // 폼 제출 방지
};
};
</script>
</head>
<body>
<form id="register_form">
국어 <input type="text" name="korean" id="korean"><br>
영어 <input type="text" name="english" id="english"><br>
수학 <input type="text" name="math" id="math"><br>
<input type="button" value="확인" id="confirm_btn"> <!-- type="button"으로 변경 -->
<div id="result"></div>
</form>
</body>
</html>
강사님답
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습</title>
<script type="text/javascript">
/*
[실습]
국어,영어,수학을 입력 받아서 총점, 평균을 구하여 출력.
[유효성 체크]
1.국어,영어,수학 필수 입력
2.숫자만 입력
3.0~100 값만 입력
[출력]
국어,영어,수학,총점,평균 출력 (div에다가)
*/
window.onload = function() {
const confirm_btn = document.getElementById('confirm_btn');
confirm_btn.onclick = function() {//onclick이 아니라 submit면 아래 return이 아니라 return false;를 써야됨
const korean = document.getElementById('korean');
if(!check(korean,'국어')){//false값이라면 return을 써서 함수를 나간다.
return;
}
const english = document.getElementById('english');
if(!check(english,'영어')){//false값이라면 return을 써서 함수를 나간다.
return;
}
const math = document.getElementById('math');
if(!check(math,'수학')){//false값이라면 return을 써서 함수를 나간다.
return;
}
let sum = Number(korean.value) + Number(english.value) + Number(math.value);
let avg = sum / 3;
let msg = '국어: ' + korean.value + '<br>';
msg +='영어: ' + english.value + '<br>';
msg +='수학: ' + math.value + '<br>';
msg +='총점: ' + sum + '<br>';
msg +='평균: ' + avg.toFixed(2);
document.getElementById('result').innerHTML = msg;
};
function check(course,name){//(input태그,국어영어수학 문자열)
if (course.value.trim() == '') {
alert(name+'점수를 필수로 입력하세요!');
course.value = ''; // 공백이 있을 경우 공백 제거
course.focus();
return false; //그냥 return을 하면 함수를 나감
}
//문자인지 숫자인지 체크
if(isNaN(course.value)){
alert(name+'점수는 숫자만 가능!');
course.value = ''; // 공백이 있을 경우 공백 제거
course.focus();
return false;
}
if(course.value<0 || course.value>100){
alert('0부터 100까지만 입력가능!');
course.value = ''; // 공백이 있을 경우 공백 제거
course.focus();
return false;
}
//정상적인 숫자 입력시 true 반환
return true;
}
};
</script>
</head>
<body>
<form>
국어 <input type="text" name="korean" id="korean"><br>
영어 <input type="text" name="english" id="english"><br>
수학 <input type="text" name="math" id="math"><br>
<input type="button" value="확인" id="confirm_btn">
<div id="result"></div>
</form>
</body>
</html>
s20_practice.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상품구매</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
h2{
margin-top:40px;
text-align:center;
}
table{
margin:40px auto;
width:600px;
}
td{
padding-left:10px;
}
#buy{
padding:10px 10px;
}
img{
width:100px;
}
#preview{
border:3px solid gray;
margin:30px auto;
text-align:center;
height:50px;
}
input[type = "submit"]{
width:70px;
height:30px;
margin-left:500px;
background-color:#289ca0;
color:white;
font-size:1.3em;
font-weight:bold;
}
span#total{
color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
//가격 정보가 저장된 객체 생성
const product = {
c0:200000,
c1:100000,
c2:5000,
c3:150000,
c4:100000
};
let sum =0;//총 구매 상품가격
let ship =0;//배송비
const inputs = document.querySelectorAll('input[type="checkbox"]');
//반복문을 이용한 이벤트 연결
for(let i=0;i<inputs.length;i++){
inputs[i].onclick = function(){
if(this.checked){//체크박스 선택시
sum+= product[this.id];
}else{//체크박스 해제시
sum-= product[this.id];
}
//배송비 구하기
if(sum>0 && sum<300000){
ship=5000;
}else{
ship=0;
}
//구매비용과 배송비를 화면에 표시
const spans = document.getElementsByTagName('span');
spans[0].innerHTML = sum.toLocaleString();
spans[1].innerHTML = ship.toLocaleString();
spans[2].innerHTML =(sum+ship).toLocaleString();
};
}
};
</script>
</head>
<body>
<h2>상품 구매</h2>
<form action ="order.jsp" method="post">
<table>
<caption>구매 상품 목록</caption>
<tr>
<td><img src="../files/bag.jpg"></td>
<td><img src="../files/coat.jpg"></td>
<td><img src="../files/jeans.jpg"></td>
<td><img src="../files/giftCard.jpg"></td>
<td><img src="../files/shoes.jpg"></td>
</tr>
<tr>
<td><input id="c0" type="checkbox" name="goods" value="bag">bag</td>
<td><input id="c1" type="checkbox" name="goods" value="coat">coat</td>
<td><input id="c2" type="checkbox" name="goods" value="jeans">jeans</td>
<td><input id="c3" type="checkbox" name="goods" value="giftCard">giftCard</td>
<td><input id="c4" type="checkbox" name="goods" value="shoes">shoes</td>
</tr>
<tr id="price">
<td>(20만원)</td>
<td>(10만원)</td>
<td>(5만원)</td>
<td>(15만원)</td>
<td>(10만원)</td>
</tr>
<tr height="100">
<td colspan="5">*<b>30만원 미만 결제시</b>5,000원의 배송비가 추가됩니다.</td>
</tr>
<tr>
<td id="preview" colspan="5">
총 상품가격<span>0</span>원 +
총 배송비<span>0</span>원 =
총 주문금액<span id="total">0</span>원
</tr>
<tr>
<td id ="buy" colspan="5"> <input type="submit" value="buy"></td>
</tr>
</table>
</form>
</body>
</html>
s21_practice.html
내답
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>음식주문</title>
<style type="text/css">
div#order{
margin:0 auto;
width:820px;
}
table{
border-collapse:collapse;
border:1px solid gray;
}
td{
height:30px;
border:1px solid gray;
}
td.title{
text-align:right;
background-color:ivory;
font-weight:bold;
color:#ff6600;
padding:0 10px;
}
input[text="number"]{
text-align:right;
width:50px;
height:19px;
}
ul{
list-style:none;
padding:0 10px;
margin:5px;
}
ul li{
display:inline; /* 세로로 된 걸 가로로 바꿈 */
}
#totalMoney{
text-align:center;
border-style:hidden;
font-size:15pt;
font-weight:hold;
color:maroon;
}
</style>
<script type="text/javascript">
window.onload = function(){
// 가격 정보가 저장된 객체 생성
const product = {
c0: 4000,
c1: 5000,
c2: 6000,
};
let sum = 0; // 총 구매 상품가격
const inputs = document.querySelectorAll('input[type="checkbox"]');
const inputnum = document.querySelectorAll('input[type="number"]');
// 체크박스가 체크되었을 때와 체크가 해제되었을 때의 이벤트 처리
for(let i = 0; i < inputs.length; i++){
inputs[i].onclick = function(){
updateTotalPrice(); // 체크박스 상태 변경 시 가격 업데이트
};
}
// 각 수량 입력 필드의 변경 이벤트 처리
for(let i = 0; i < inputnum.length; i++){
inputnum[i].oninput = function(){
updateTotalPrice(); // 수량 입력 필드 값 변경 시 가격 업데이트
};
}
// 총 가격 업데이트 함수
function updateTotalPrice(){
sum = 0; // 총 가격 초기화
// 모든 체크박스를 반복하여 체크된 경우 가격을 합산
for(let i = 0; i < inputs.length; i++){
if(inputs[i].checked){
sum += product[inputs[i].id] * parseInt(inputnum[i].value);
}
}
const totalMoney = document.getElementById('totalMoney');
totalMoney.value = sum.toLocaleString(); // 업데이트된 가격을 출력
}
};
</script>
</head>
<body>
<div id = "order">
<h2>계산서</h2>
<form action="a.jsp" method ="post">
<table>
<tr>
<td class ="title">식사류</td>
<td>
<ul>
<li>
<input type="checkbox" id ="c0" name="foodName"
value="짜장면" class="order-item">
<label for="c0">짜장면(4,000원)</label>
<input type="number" id="num_c0"
name="foodOrderCnt" value ="0" min="0" max ="99"
class="order-item">
</li>
<li>
<input type="checkbox" id ="c1" name="foodName"
value="짬뽕" class="order-item">
<label for="c1">짬뽕(5,000원)</label>
<input type="number" id="num_c1"
name="foodOrderCnt" value ="0" min="0" max ="99"
class="order-item">
</li>
<li>
<input type="checkbox" id ="c2" name="foodName"
value="볶음밥" class="order-item">
<label for="c2">볶음밥(6,000원)</label>
<input type="number" id="num_c2"
name="foodOrderCnt" value ="0" min="0" max ="99"
class="order-item">
</li>
</ul>
</td>
</tr>
<tr>
<td class="title">청구금액</td>
<td>
<input type="text" id ="totalMoney" name="totalMoney"
size="15" value="0" readonly="readonly">원
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type = "submit" value = "주문">
<input type = "reset" value = "취소">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
강사님답
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>음식 주문</title>
<style type="text/css">
div#order{
margin:0 auto;
width:820px;
}
table{
border-collapse:collapse;
border:1px solid gray;
}
td{
height:30px;
border:1px solid gray;
}
td.title{
text-align:right;
background-color:ivory;
font-weight:bold;
color:#ff6600;
padding:0 10px;
}
input[type="number"]{
text-align:right;
width:50px;
height:19px;
}
ul{
list-style:none;
padding:0 10px;
margin:5px;
}
ul li{
display:inline;
}
#totalMoney{
text-align:center;
border-style:hidden;
font-size:15pt;
font-weight:hold;
color:maroon;
}
</style>
<script type="text/javascript">
window.onload=function(){
//음식 가격 정보가 저장된 객체
const product = {
c0:4000,
c1:5000,
c2:6000
};
const foods = document.querySelectorAll(
'input[type="checkbox"]');
for(let i=0;i<foods.length;i++){
foods[i].onclick=function(){
//이벤트가 발생한 객체를 getSum 메서드의 파라미터에 전달
getSum(this);
};
}
const quantity = document.querySelectorAll(
'input[type="number"]');
for(let i=0;i<quantity.length;i++){
quantity[i].onclick=function(){
getSum(this);
};
quantity[i].onkeyup=function(){
getSum(this);
};
}
//지불할 금액을 구하는 함수
function getSum(obj){
if(obj.type == 'checkbox'){
const input_num = document.getElementById('num_'+obj.id);
if(obj.checked){//체크박스 선택시
input_num.value = 1;
}else{//체크박스 해제시
input_num.value = 0;
}
}else{//input type="number"
if(obj.value>=1){
//숫자를 1이상 입력(선택)했을 때
document.getElementById(obj.id.substr(4)).checked=true;
}else{
//숫자를 0으로 입력(선택)했을 때
document.getElementById(obj.id.substr(4)).checked=false;
}
}
//결과
let sum = 0;
//객체에 저장된 숫자를 읽어와서 연산
for(let key in product){
//가격 * 수량
sum += product[key] * document.getElementById('num_'+key).value;
}
let totalMoney = document.getElementById('totalMoney');
//지불 금액 표시
totalMoney.value = sum.toLocaleString();
}
};
</script>
</head>
<body>
<div id="order">
<h2>계산서</h2>
<form action="a.jsp" method="post">
<table>
<tr>
<td class="title">식사류</td>
<td>
<ul>
<li>
<input type="checkbox"
id="c0" name="foodName"
value="짜장면" class="order-item">
<label for="c0">짜장면(4,000원)</label>
<input type="number" id="num_c0"
name="foodOrderCnt" value="0"
min="0" max="99"
class="order-item">
</li>
<li>
<input type="checkbox" id="c1"
name="foodName" value="짬뽕"
class="order-item">
<label for="c1">짬뽕(5,000원)</label>
<input type="number" id="num_c1"
name="foodOrderCnt" value="0"
min="0" max="99"
class="order-item">
</li>
<li>
<input type="checkbox" id="c2"
name="foodName" value="볶음밥"
class="order-item">
<label for="c2">볶음밥(6,000원)</label>
<input type="number" id="num_c2"
name="foodOrderCnt" value="0"
min="0" max="99"
class="order-item">
</li>
</ul>
</td>
</tr>
<tr>
<td class="title">청구금액</td>
<td>
<input type="text" id="totalMoney"
name="totalMoney" size="15" value="0"
readonly="readonly">원
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="주문">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
s22_practice.html(39일차)
내답
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습</title>
<style type="text/css">
body {
font-family: sans-serif;
}
h1 {
text-align: center;
}
div#game {
width: 450px;
margin: 0 auto;
text-align: center;
}
div.result-img {
position: relative;
width: 220px;
float: left;
}
div.result-img:first-child {
text-align: right;
}
div.result-img:last-child {
text-align: left;
}
div.result-img span {
font-size: 20px;
font-weight: bold;
border-radius: 20px;
width: 120px;
text-align: center;
background-color: #f4f2c6;
position: absolute;
top: 25%;
left: 20%;
}
/* 그림에 커서를 올리면 손바닥 아이콘으로 변하게 처리 */
.user-option {
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function(){
// 사용자가 선택한 이미지를 표시할 이미지
const userImage = document.querySelector('.result-img:last-child img');
// 컴퓨터가 선택한 이미지를 표시할 이미지
const computerImage = document.querySelector('.result-img:first-child img');
// userOptions를 가져옴
const userOptions = document.getElementsByClassName('user-option');
// 결과 span
const resultSpan2 = document.querySelector('.result-img:last-child span');
const resultSpan = document.querySelector('.result-img:first-child span');
// userOptions에 클릭 이벤트 연결
for(let i=0; i<userOptions.length; i++){
userOptions[i].onclick = function(){
// 사용자가 선택한 이미지를 표시하고 확대하여 보여줌
userImage.src = this.src;
userImage.style.width = '200px';
userImage.style.height = '150px';
userImage.style.display = 'block'; // 이미지를 보이도록 설정
// 랜덤으로 컴퓨터가 선택한 이미지를 표시
const randomIndex = Math.floor(Math.random() * userOptions.length);
const computerSelectedImg = userOptions[randomIndex];
computerImage.src = computerSelectedImg.src;
computerImage.style.width = '200px';
computerImage.style.height = '150px';
computerImage.style.display = 'block'; // 이미지를 보이도록 설정
// 승부 결과 표시
if(computerSelectedImg === this){
resultSpan.innerText = "컴퓨터 무승부";
resultSpan2.innerText = "사용자 무승부";
} else if(computerSelectedImg === userOptions[0] && this === userOptions[1]){
resultSpan.innerText = "컴퓨터 패배";
resultSpan2.innerText = "사용자 승";
} else if(computerSelectedImg === userOptions[0] && this === userOptions[2]){
resultSpan.innerText = "컴퓨터 승";
resultSpan2.innerText = "사용자 패";
} else if(computerSelectedImg === userOptions[1] && this === userOptions[0]){
resultSpan.innerText = "컴퓨터 승";
resultSpan2.innerText = "사용자 패";
} else if(computerSelectedImg === userOptions[1] && this === userOptions[2]){
resultSpan.innerText = "컴퓨터 패배";
resultSpan2.innerText = "사용자 승";
} else if(computerSelectedImg === userOptions[2] && this === userOptions[0]){
resultSpan.innerText = "컴퓨터 패배";
resultSpan2.innerText = "사용자 승";
} else if(computerSelectedImg === userOptions[2] && this === userOptions[1]){
resultSpan.innerText = "컴퓨터 승";
resultSpan2.innerText = "사용자 패";
}
};
}
};
</script>
</head>
<body>
<h1>가위바위보 게임</h1>
<div id="game">
<div>
<img class="user-option" id="img0" src="../files/timg0.png" width="90">
<img class="user-option" id="img1" src="../files/timg1.png" width="90">
<img class="user-option" id="img2" src="../files/timg2.png" width="90">
</div>
<div>
<div class="result-img"><img style="display:none;" alt="컴퓨터"><span></span></div>
<div class="result-img"><img style="display:none;" alt="사용자"><span></span></div>
</div>
</div>
</body>
</html>
강사님답 기본버전
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습</title>
<style type="text/css">
body {
font-family: sans-serif;
}
h1 {
text-align: center;
}
div#game {
width: 450px;
margin: 0 auto;
text-align: center;
}
div.result-img {
position: relative;
width: 220px;
float: left;
}
div.result-img:first-child {
text-align: right;
}
div.result-img:last-child {
text-align: left;
}
div.result-img span {
font-size: 20px;
font-weight: bold;
border-radius: 20px;
width: 120px;
text-align: center;
background-color: #f4f2c6;
position: absolute;
top: 25%;
left: 20%;
}
/* 그림에 커서를 올리면 손바닥 아이콘으로 변하게 처리 */
.user-option {
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function(){
//computer, user가 선택한 값을 표시할 이미지
const gameImage = document.querySelectorAll('.result-img img');
//user가 선택할 이미지
const userOptions = document.getElementsByClassName('user-option');
// userOptions에 클릭 이벤트 연결
for(let i=0; i<userOptions.length; i++){
userOptions[i].onclick = function(){
//computer가 선택한 값(0 가위, 1 바위 2 보)
let com_answer = Math.floor(Math.random()*3);
//computer가 선택한 이미지 표하기
gameImage[0].style.display = '';
gameImage[0].src='../files/timg'+com_answer+'.png';
//user가 선택한 값
let user_answer = this.id.substr(3);
//user가 선택한 이미지 표시하기
gameImage[1].style.display = '';
gameImage[1].src = '../files/timg'+user_answer+'.png';
//가위바위보 결과 표시하기
/*
가위바위보 결과
컴퓨터 사용자 컴퓨터-사용자 결과
0 0 0 무승부
0 1 -1 패(컴퓨터입장)
0 2 -2 승
-------------------------------------
1 0 1 승
1 1 0 무승부
1 2 -1 패
-------------------------------------
2 0 2 패
2 1 1 승
2 2 0 무승부
*/
let result;
let num = com_answer-user_answer;
if(num==0){
result = ['무','무'];
}else if(num==-2 || num==1){
result = ['승','패'];
}else if(num==-1 || num==2){
result = ['패','승'];
}
const showResult = document.querySelectorAll('.result-img span');
for(let i=0; i<showResult.length;i++){
showResult[i].display = '';
showResult[i].innerHTML = (i ==0 ? '컴퓨터':'사용자')+result[i];
}
};
};
};
</script>
</head>
<body>
<h1>가위바위보 게임</h1>
<div id="game">
<div>
<img class="user-option" id="img0" src="../files/timg0.png" width="90">
<img class="user-option" id="img1" src="../files/timg1.png" width="90">
<img class="user-option" id="img2" src="../files/timg2.png" width="90">
</div>
<div>
<div class="result-img"><img style="display:none;" alt="컴퓨터"><span></span></div>
<div class="result-img"><img style="display:none;" alt="사용자"><span></span></div>
</div>
</div>
</body>
</html>
강사님 가위바위보 이긴사람이 사진크게
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습</title>
<style type="text/css">
body {
font-family: sans-serif;
}
h1 {
text-align: center;
}
div#game {
width: 450px;
margin: 0 auto;
text-align: center;
}
div.result-img {
position: relative;
width: 220px;
float: left;
}
div.result-img:first-child {
text-align: right;
}
div.result-img:last-child {
text-align: left;
}
div.result-img span {
font-size: 20px;
font-weight: bold;
border-radius: 20px;
width: 120px;
text-align: center;
background-color: #f4f2c6;
position: absolute;
top: 25%;
left: 20%;
}
/* 그림에 커서를 올리면 손바닥 아이콘으로 변하게 처리 */
.user-option {
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function(){
//computer, user가 선택한 값을 표시할 이미지
const gameImage = document.querySelectorAll('.result-img img');
//user가 선택할 이미지
const userOptions = document.getElementsByClassName('user-option');
// userOptions에 클릭 이벤트 연결
for(let i=0; i<userOptions.length; i++){
userOptions[i].onclick = function(){
//computer가 선택한 값(0 가위, 1 바위 2 보)
let com_answer = Math.floor(Math.random()*3);
//computer가 선택한 이미지 표하기
gameImage[0].style.display = '';
gameImage[0].src='../files/timg'+com_answer+'.png';
//user가 선택한 값
let user_answer = this.id.substr(3);
//user가 선택한 이미지 표시하기
gameImage[1].style.display = '';
gameImage[1].src = '../files/timg'+user_answer+'.png';
//가위바위보 결과 표시하기
/*
가위바위보 결과
컴퓨터 사용자 컴퓨터-사용자 결과
0 0 0 무승부
0 1 -1 패(컴퓨터입장)
0 2 -2 승
-------------------------------------
1 0 1 승
1 1 0 무승부
1 2 -1 패
-------------------------------------
2 0 2 패
2 1 1 승
2 2 0 무승부
*/
let result;
let num = com_answer-user_answer;
if(num==0){
result = ['무','무'];
}else if(num==-2 || num==1){
result = ['승','패'];
}else if(num==-1 || num==2){
result = ['패','승'];
}
const showResult = document.querySelectorAll('.result-img span');
for(let i=0; i<showResult.length;i++){
if(result[i]=='패'){
gameImage[i].width =100;
showResult[i].display = 'none';
//showResult[i].style.display = 'none'; 이걸쓰면 패배한사람은 글자안뜸
}else{
gameImage[i].width =200;
showResult[i].display = '';
//showResult[i].style.display = ''; 이걸쓰면 패배한사람은 글자안뜸
}
showResult[i].innerHTML = (i ==0 ? '컴퓨터':'사용자')+result[i];
}
};
};
};
</script>
</head>
<body>
<h1>가위바위보 게임</h1>
<div id="game">
<div>
<img class="user-option" id="img0" src="../files/timg0.png" width="90">
<img class="user-option" id="img1" src="../files/timg1.png" width="90">
<img class="user-option" id="img2" src="../files/timg2.png" width="90">
</div>
<div>
<div class="result-img"><img style="display:none;" alt="컴퓨터"><span></span></div>
<div class="result-img"><img style="display:none;" alt="사용자"><span></span></div>
</div>
</div>
</body>
</html>
'쌍용교육(JAVA) > JavaScript' 카테고리의 다른 글
| 쌍용교육 -JavaScript수업 38일차 exception (0) | 2024.04.15 |
|---|---|
| 쌍용교육 -JavaScript수업 38일차 JSObject (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 37~38일차 JSEvent(2) (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 37일차 JSEvent(1) (0) | 2024.04.15 |
| 쌍용교육 -JavaScript수업 36~37일차 ch24_JSDOM (0) | 2024.04.15 |
