랜덤이미지 보여주기

const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];

const chosenImg = images[Math.floor(Math.random() * (images.length))];

const bgImg = document.createElement("img");

bgImg.src = `img/${chosenImg}`;

document.body.appendChild(bgImg);

img폴더에 갖고있는 이미지 파일의 이름과 같은 문자배열을 만들어준다

 

Math.random()을 이용해 0부터 1 사이의 랜덤한 숫자를 받아온다(소숫점 아래를 포함하는 float 형태)

내가 필요로 하는 숫자는 0부터 내가 가진 이미지의 총갯수까지의 숫자이기때문에 images.lenght를 곱해준다

Math.random()의 랜덤한 숫자는 float 형태이기때문에 소숫점 아래의 숫자들을 없애주는 Math.foor()로 감싸준다

 

Math.round() : 반올림

Math.floor() : 내림

Math.ceil() : 올림

 

document.createElement()를 이용해 자바스크립트에서 html 태그를 만들 수 있다

img태그를 생성해주고 src 경로를 넣어준다

appendChild()를 이용해 자바스크립에만 존재하고있는 img태그를 body 하단에 추가해준다

prepend() : 상단에 추가