본문 바로가기

👨‍💻 코딩 도서관

🚀 자바 스크립트 JavaScript

자바 스크립트 초급 문제/풀이 📝3️⃣

by Meteora_ 2021. 3. 3.

728x90

조건 - 'Script를 사용하여 문제를 풀어봅시다.'

1.

코드 펼치기->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body id="bodycolor" style="background-color: "" ">

<h1>배경색의 변경</h1>
다음 버튼을 클릭하면 홈페이지의 배경색을 변경할 수 있습니다.
<br><br>
<button type="button" id="red" onclick="changecolor(1)">빨강</button>
<button type="button" id="green" onclick="changecolor(2)">녹색</button>
<button type="button" id="blue" onclick="changecolor(3)">청색</button>
<button type="button" id="orange" onclick="changecolor(4)">주황색</button>
<button type="button" id="black" onclick="changecolor(5)">검정색</button>
<button type="button" id="white" onclick="changecolor(6)">흰색</button>

<script type="text/javascript">

let obj = document.getElementById("bodycolor");

function changecolor(num){
	
	if(num == 1){
		obj.style.backgroundColor="red";
	}
	if(num == 2){
		obj.style.backgroundColor="green";
	}
	if(num == 3){
		obj.style.backgroundColor="blue";
	}
	if(num == 4){
		obj.style.backgroundColor="orange";
	}
	if(num == 5){
		obj.style.backgroundColor="black";
	}
	if(num == 6){
		obj.style.backgroundColor="white";
	}
	
	
}


</script>

</body>
</html>

2.

코드 펼치기->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>환영합니다</h1>
<br>
※현재시각은<input type="text" id="timemonitor" value="현재시간">입니다.

<script type="text/javascript">


let datetime = new Date();


alert(datetime.getHours()+":"+datetime.getMinutes()+":"+datetime.getSeconds()); //확인용


let wholetime = datetime.getHours()+":"+datetime.getMinutes()+":"+datetime.getSeconds(); //시분초

document.getElementById("timemonitor").value=wholetime;




</script>

</body>



</html>

3.

코드 펼치기->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>(문제)</h1>
영어 속담으로 "1일 1개씩 먹으면 의사 필요없다"라고 하는 과일은 무엇일까요?
<br><br>
<input type="checkbox" id="answerlow">영어(소문자)로 답한다
<br><br>
답 : <input type="text" id="answerzone">
<br><br>
<button type="button" id="confirm" onclick="confmethod()">답을첵크</button>

<script>


function confmethod() {
let low = document.getElementById('answerlow').checked;
let answer = document.getElementById('answerzone').value;

if(low == true){
if(answer == "apple" || answer == "APPLE" || answer == 'Apple'){
alert('정답입니다');
}else{
alert('오답입니다');
}
}else{
if(answer == '사과' || answer == '능금'){
alert('정답입니다');
}else{
alert('오답입니다');
}
}
}
</script>


</body>
</html>

4.

코드 펼치기 ->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>미술관 및 박물관의 링크</h1>

<form name="f1">
<select name="locationname" onchange="golink()">

<option>-대상을 선택</option>
<option value="http://sema.seoul.go.kr">-서울시립미술관</option>
<option value="http://www.mmca.go.kr">-국립현대미술관</option>
<option value="http://www.sac.or.kr">-예술의전당</option>
<option value="http://www.museum.go.kr">-국립중앙박물관</option>
<option value="http://www.museum.seoul.kr">-서울역사박물관</option>
<option value="http://www.nfm.go.kr">-국립민속박물관</option>

</select>
</form>

<script type="text/javascript">

function golink(){
	
	let n= document.f1.locationname.selectedIndex;
	
	if(n!=0){
		location.href=document.f1.locationname.options[n].value;
	}
	
}

</script>

</body>
</html>

5.

코드 펼치기 ->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>2개의 주사위</h1>
버튼을 클릭하면 2개의 주사위가 랜덤으로 나온다.<br><br>
<table>
<tr>
	<td style="padding-right: 15px;"><img alt="" src="sai_1.gif"> </td>
	<td><img alt="" src="sai_6.gif"> </td>
</tr>
</table>
<br>
<button type="button" onclick="randomDice()">주사위 굴림.</button>


<script type="text/javascript">
	var diceNum = 1;
	var diceNum2 = 6;
	var count = 5;
	var time = 0;
	
	
function throwDice() {
	count = count - 1; 
	
	if(count != 0) { 
		
		diceNum = diceNum+1;
		if(diceNum == 7) {
			diceNum = 1;
		}
		var imgsrc = document.getElementsByTagName("img")[0];
		var str = "sai_"+diceNum+".gif";
		imgsrc.src = str;
		
	
		diceNum2 = diceNum2 - 1;
		if(diceNum2 == 0) {
			diceNum2 = 6;
		}
		var imgsrc2 = document.getElementsByTagName("img")[1];
		var str2 = "sai_"+diceNum2+".gif";
		imgsrc2.src = str2;
	}
	else if(count==0){
		
		clearInterval(time);
		
		var num = Math.floor(Math.random()*6)+1;
		var num2 = Math.floor(Math.random()*6)+1;

		var imgsrc = document.getElementsByTagName("img")[0];
		var str = "sai_"+num+".gif";
		imgsrc.src = str;
		
	
		var imgsrc2 = document.getElementsByTagName("img")[1];
		var str2 = "sai_"+num2+".gif";
		imgsrc2.src = str2;
		
		
	}
	
}
function randomDice() {
	count = 10;
	clearInterval(time);
	time = setInterval("throwDice()",50);
	
}



</script>
</body>
</html>

6.

코드 펼치기->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<h1>다음 생일까지 남은 일수</h1>
	<br>
	<pre>
	다음 버튼을 클릭하여 생일을 입력하면,
 	다음 생일까지 남은 일수를 볼 수 있습니다.
 	</pre>
	<button id="pushbutton" onclick="calbirth()">생일을 입력</button>
	<input type="text" id="ide">
	
	<script>
	
	function calbirth(){
		
		let birthMonth = prompt("몇월인가요? 1 ~ 12","");
		let birthDate = prompt("몇일 인가요? 1~31","")
		
		
		let now = new Date();
		let birthday = new Date(birthMonth+"/"+birthDate+"/"+now.getFullYear());
		
		
		birthday.setMonth(birthMonth-1);
		birthday.setDate(birthDate);
		
		let monthSec = birthday.getTime() - now.getTime();
		
		if(monthSec <= 0){
			birthday.setFullYear(now.getFullYear()+1);
			monthSec = birthday.getTime() - now.getTime();
		}
		
		let days = monthSec / (24 * 60 * 60 * 1000)
		
		days = Math.ceil(days);
		
		alert("다음 생일까지" + days + "일 남음");
		
	}

	
	</script>
	
</body>
</html>

더 좋은 코드가 있다면 confirm 부탁드립니다.

감사합니다.

저작자표시

'🚀 자바 스크립트 JavaScript' 카테고리의 다른 글

1️⃣3️⃣ 자바 스크립트 - Dom이란? + childNodes, nodeList, appendChild, insertChild 정리 (0)	2021.03.04
1️⃣2️⃣ 자바스크립트 - onload, onblur, onchange, onkey--, onmouse-- 정리 (0)	2021.03.04
1️⃣1️⃣ 자바스크립트 - 이름 , 나이값 넘기는 3가지 방법 (0)	2021.03.03
🔟 자바 스크립트 - 화면 전환 (앞페이지, 뒷페이지, 새로고침) (0)	2021.03.03
자바 스크립트 기초 문제/풀이 - 라면타이머 📝2️⃣ (0)	2021.03.03

댓글

티스토리툴바