반응형
Javascript 배경 색깔 자동 변경 소스
html body 태그 백그라운드 색깔이 자동으로 변경되는 코드를 Javascript 소스를 간단히 작성해 보았습니다. jQuery를 활용하지 않고 순수 Javascript만으로 구현해 해당 소스를 복사해 .html 파일 확장자로 저장 하시고 브라우저에서 확인해 보시면 됩니다.
처음엔 색상 코드를 배열로 저장해 랜덤하게 뽑아내려고 했지만, 인터넷에 있는 자료 중 색깔 코드가 자동으로 생성되는 소스를 활용해 코드를 작성했습니다. 소스의 흐름은 간단합니다. change 함수가 무한 반복되며 실시간으로 랜덤하게 색상이 변경되는 모습을 보기 위해 1초에 한 번씩 코드가 실행 되도록 코드를 작성했습니다.
코드의 상세 내용은 주석에 있는 내용을 참고하시면 이해하실 수 있으며 무한반복 되지만 멈추기 위한 방법이 필요한 분들이 있을 수 있다는 판단에 clearTimeout을 활용하는 구문도 작성해 보았습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>자동으로 백그라운드 색깔이 변경 되도록 하는게 목표 현재는 10000번돔.</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
var number = 0;//특정 갯수만큼 반복하고 멈추게 하기 위해서
function change() {
const roop = setTimeout(change, 1000);//1초에 한번씩 실행
//자동색상코드 생성 코드 이건 인터넷에서 가져온거
const randomColor = Math.floor(Math.random()*16777215).toString(16);
document.body.style.backgroundColor = "#" + randomColor;
if(number >= 10000){//만번만 돌아
clearTimeout(roop);
}
number++;
};
change();//clearTimeout 조건이 될떄까지 반복
</script>
결과화면
결과화면은 아래 이미지와 같이 표시 됩니다. 현재 소스 기준으로는 10000번 반복 됩니다.
해당 소스를 파일로도 필요하신 분들은 파일을 다운로드받아서 확인해 보셔도 됩니다. 간단한 소스지만 개인적으로 재밌을 것 같다는 생각에 코드를 작성해 보았으니 혹시라도 필요하신 분들은 참고하시면 좋을 것 같습니다.
반응형
