자바스크립트를 이용하여
버튼을 클릭할 때마다
화면 배경 색상 변경을 구현하겠습니다.
화면 출력내용
· 배경색상(backgroundcolor) 총 6개 배열
· 버튼 1개 사용
· 버튼 클릭시마다 색상값 중 1개가 랜덤으로 선택되어 body에 적용
· 배경색상(backgroundcolor) 총 6개 배열
· 버튼 1개 사용
· 버튼 클릭시마다 색상값 중 1개가 랜덤으로 선택되어 body에 적용
버튼 클릭시마다 화면 배경 색상 바꾸기 예제
<html>
<body id="colorCont">
<button onclick="colorChange()">색상 변경</button>
</body>
<javascript>
function colorChange() {
var color = ["#FC5C7D", "#6A82FB", "#38ef7d", "#fffbd5", "#b20a2c", "#CAC531"];
var num = Math.floor(Math.random() * color.length);
//Math.random()이용하여 배열의 데이터 개수(length) 이용하여 배열의 인덱스, 변수 num이 랜덤으로 나옴
var bodyTag = document.getElementById("colorCont");
bodyTag.style.backgroundColor = color[num];
//body의 css 배경색상을 배열 데이터의 num번째 컬러로 선택
}
· length 메소드: 배열(array)에 저장된 총 데이터 개수를 반환합니다.
· Math.random: 0~1사이의 난수를 반환합니다.
· Math.floor: 소수점 첫째 자리에서 무조건 내림하여 정수를 반환합니다.
· Math.ceil: 소수점 첫째 자리에서 무조건 올림하여 정수를 반환합니다.
난수를 정수로 반환받으려면,
Math.floor(Math.random() * 배열 데이터의 총개수);
화면 보기 (Result 클릭)
반응형
'개발 > Javascript' 카테고리의 다른 글
| [js] input option 값 출력하기(ft. onchange onfocus) (0) | 2020.09.20 |
|---|---|
| [js] 자바스크립트 회원가입 유효성 검사(ft. form input 정규식) (0) | 2020.07.24 |
| [js] 버튼 클릭시 마다 이미지 변경 구현 (ft . onclick addEventListener) (0) | 2020.07.12 |
| [js/jQuery] 응용편_카운트업 숫자 올라가는 효과 구현. 숫자 자동 증가 (0) | 2020.07.01 |
| [js] 홈페이지 배너 팝업창 띄우기, 창닫기 (0) | 2020.06.28 |
댓글