JavaScript 새로고침 할때마다 배경 바꾸기

오늘은 새로고침 할때마다 배경이 바뀌는걸 자바스크립트를 이용해 만들어 볼거다

결과물부터 보자 

짜자잔 안믿으면 어쩔수없지만 새로고침을 했다

이렇게 사진이 바뀌는걸 확인할 수 있다 

사진은 6개있는데 귀찮아서 2개만 찍었다

사실 만들면서 어려울줄 알았는데 너무 쉽게 끝나서 당황했다

'

쏘쓰

const body=document.querySelector("body"); //call body tag

const photoNum=6; //num of photo;

function callRan(){

ranNum=Math.floor((Math.random()*6)+1);//call number 1 to 6

return ranNum

}

function callPho(){

ranNum=callRan();

url=`../image/${ranNum}.jpg`;

body.style.backgroundImage=`url(${url})`;

}

function init(){

callPho();

}

init();

이렇게 구성이 되어있따

*전제조건*

1. 배경으로 지정할 사진들

2. 배경으로 지정할 사진들의 이름을 1.jpg 2.jpg ... 이런식으로 지정

위에서부터 설명하면 

body 태그를 document.querySelector 을 이용해 불러왔다

그리고 나는 미리 배경에 이용할 사진을 6개를 다운받아놨기때문에 photoNum 을 6으로 지정했다

callRan() 함수에선 랜덤한 넘버를 생성하고 그 생성한 넘버를 리턴을 해준다

사진이 6개 이기 때문에

Math.floor((Math.random()*6)+1) 을 해준다

+1 을 해준이유는 random 은 만약 *6을 하면 0-5 까지의 숫자중에서 랜덤으로 정해지는데 

거기에 +1을 해줘서 1-6을 사용할 수 있게 해주는거다.

return ranNum 을 사용해 임의로 지정된 숫자를 리턴해준다

callPho 는 사진을 불러오는 곳인데

우선 callRan() 을 ranNum 에 저장해준다( 리턴값이 저장)

url 부분에 ${ranNum}을 사용해줌으로서 1-6까지의 사진을 임의로 지정하게끔 url 을 설정해준다

백그라운드 이미지를  url  을 넣어서 바꿔준다

백그라운드의 크기를 맞추기 위해 background-size : 100% 를 css 에 지정해주었다

그럼 안녕 ~