TIL-no.11 Javascript로 배경화면 자동으로 바꾸기

1. 이미지 저장

배경화면을 바꾸기 위해 일단 image 다섯가지를 저장하였다
이미지는 unsplash.com을 이용하였다.

각 이미지의 파일명을 숫자로 바꿔줬다(바꾼이유는 Math를 사용하기 위해서임)

2. 이미지 불러오기 및 상수설정

쿼리셀렉터를 이용하여 body tag전체를 불러왔으며 IMG_NUMBER를 변수로 만들어 유지보수가 가능하게 만들었다.

const body = document.querySelector("body");

const IMG_NUMBER = 5;

3. 수가 배정된 이미지 html에 추가 및 src에 가상숫자 부여

painImage라는 함수를 만들어 imgNumber라는 key값을 localdata로 보내고
image.src를 이용하여 image를 불러오도록하였다(숫자는 0 부터시작하니 )
그리고 classList를 사용하여 bgImage라는 css 효과를 넣어줬다(css에 그냥 높이랑 넓이 같은거 넣어놓음)
body에는 image라는 태그가 들어가도록 appendchild설정을 한다.

function paintImage(imgNumber){
    const image = new Image();
    image.src = `images/${imgNumber +1}.jpg`
    image.classList.add("bgImage");
    body.appendChild(image);
    
}

4. Math.random을 사용한 랜덤한 숫자 뽑아내기

random 으로 number를 가져오기위해(가져오는넘버는 이미지 이름) Math.ranom() 사용 그렇게 배경 랜덤으로 바꾼다.
5까지 아무수나 랜덤으로 가지고 오고 싶으면 Math.random()*5 하면된다.
Math.floor 는 내림 Ceil은 올림임. 바닥 천장 생각하면 쉽단다.

function genRandom(){
    const number = Math.floor(Math.random()*IMG_NUMBER);
    return number;
}

5. 실행을 위한 init

function init(){
    const randomNumber = genRandom();
    paintImage(randomNumber);
}

init();

참고:Nomad Coders