(ToDoList) #Javascript로 html element를 만들고 삽입하기, 무작위로 배경화면 만들기 (appendChild, createElement)

appendChild, createElement

 

- 만들고 싶은 기능

 

---

 

1) 먼저 배경화면으로 만들고 싶은 파일들을 저장하여, img파일에 넣어주었다.

2) Javascript

1. 먼저 이미지파일을 images라는 array에 담아주었다.

// 이미지 파일명을 array에 담아준다.
const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];

 

2. 랜덤화 하는 변수만들기  (=명언 랜덤과 같음)

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

 

3. img 태그를 document에서 만든다.

const bgimage = document.createElement("img");
bgimage.src = `img/${todaysImage}`;

 

4. 만든 document를 html에 넣어준다.

document.body.appendChild(bgimage);

 

---

전체 JS파일

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

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

const bgimage = document.createElement("img");
bgimage.src = `img/${todaysImage}`;

document.body.appendChild(bgimage);