PROJECT 02 >>>
무작위로 HEX 코드를 생성해 html배경색으로 설정하기!
<!--
솔직히
// FOR문으로 HEX배열의 문자를 이용하여 6자리의 HEX코드를 구성한다.
for (var i = 0; i < 6; i++) {
var index = Math.floor(Math.random()*hex.length)
// hex컬러는 #과 결합해서 사용하므로 미리 선언해두었던 변수와 결합시킨다.
s += hex[index];
}
이 부분은 모르겠어서 답안코드를 참고했다.
hex로 지정될 문자도 처음엔 Math.random() 적어놓고 이걸 숫자0에서 F까지 어떻게 적용하지..하고 멍때렸다.
정답은 모두 그냥 배열에 저장하면 되었다.
-->
# hex 코드는 0~9 숫자와 A~F 의 문자가 총 6자의 길이로 결합된 형태이다.
# 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PROJECT02</title>
<script type="text/javascript">
// 2. hex코드가 될 문자들을 배열에 저장하기.
var hex = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'];
// 3. 버튼에 onclick이벤트로 연결해두었던 함수를 생성한다.
function changeBg(){
var s = "#";
// 4. FOR문으로 HEX배열의 문자를 이용하여 6자리의 HEX코드를 구성한다.
for (var i = 0; i < 6; i++) {
var index = Math.floor(Math.random()*hex.length)
// hex컬러는 #과 결합해서 사용하므로 미리 선언해두었던 변수와 결합시킨다.
s += hex[index];
}
// 5-1. 클릭할때마다 해당 hex코드가 innerHTML에 출력되도록 설정한다.
document.getElementById("h2").innerHTML = s;
// 5-2. 해당 hex코드를 배경색깔에 적용시킨다.
var backgroundChanged = document.getElementsByTagName("body")[0];
backgroundChanged.style.backgroundColor = s;
}
</script>
</head>
<body>
<h2 id="h2"></h2>
<!-- 1. 버튼생성, onclick이벤트를 함수로 연결해서 지정한다. -->
<button onclick="changeBg()" id="btn">CLICK ME</button>
</body>
</html># 프로젝트 출처
Hex Change Background Color JavaScript Project - JSBeginners
This HEX background color changing app was also short and sweet to complete. However, I did find the instructor's solution interesting. The idea was to make a random hex value created from an array of all the possible different hex values, loop through the
jsbeginners.com
'MINI PROJECT > JavaScript' 카테고리의 다른 글
| 대출계산기 (0) | 2021.09.05 |
|---|---|
| 명언제조기 (0) | 2021.08.22 |
| 공포의 쿵쿵따게임! (0) | 2021.08.18 |
| 끝말잇기 게임을 만들었다. (0) | 2021.08.18 |
| 버튼을 클릭하면 배경색이 바뀌도록 설정하기 (0) | 2021.08.16 |
댓글