[ Java Script ] 배열 활용하여 클릭하면 색 변경하기
2022. 2. 18. 10:33ㆍJava Script
< 코드 1 >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열실습3</title>
<style type="text/css">
#btn {
width: 300px;
height: 100px;
line-height: 50px;
background-color: navy;
color: white;
font-size: 30px;
}
</style>
</head>
<body>
<script type="text/javascript">
function colorChange(){
var color = ['red', 'green', 'black','yellow','brown'];
var num = Math.floor(Math.random() * 5);
var btn = document.getElementById('btn');
btn.style.backgroundColor = color[num];
}
</script>
<div>
<button id="btn" type="button" onclick='colorChange()'>클릭</button>
</div>
</body>
</html>
<!--
3. 화면에 상자가 보임
클릭이 가능한 상자
클릭시 랜덤하게 색깔변경
-> 색정보 배열
-->
< 코드 2 >
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배열에제3번</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
cursor: pointer;
text-align: center;
line-height: 100px;
background-color: Coral;
}
</style>
<script type="text/javascript">
function changeColor(obj){
var color=['Sienna','GreenYellow','DodgerBlue','Gold','Silver'];
var i=Math.floor(Math.random()*color.length);
obj.style.backgroundColor=color[i];
obj.innerText=color[i];
}
</script>
</head>
<body>
<div id="box" onclick="changeColor(this)">Coral</div>
</body>
</html>'Java Script' 카테고리의 다른 글
| [ Java Script ] D-day 계산 프로그램 만들기 (0) | 2022.02.18 |
|---|---|
| [ Java Script ] 숫자 업다운 게임 하기 (0) | 2022.02.18 |
| [ Java Script ] 배열 정렬과 추가, 제거 (0) | 2022.02.17 |
| [ Java Script ] 시험점수 합계와 평균 구하기 (0) | 2022.02.17 |
| [ Java Script ] 색깔 배열에 저장하기 (0) | 2022.02.17 |