개발하는 너구리

TIL-24.04.17 본문

TIL

TIL-24.04.17

너구리개발자 2024. 4. 17. 23:14

 

 

 

문제점

<img>를 이용해 백그라운드이미지로 채우는 단순한 과정 중, 문뜩 이런 생각이 들었다.

하나의 백그라운드 이미지만으로 고정하지말고,

일정한 간격으로 여러개의 이미지가 무작위하게 나타나는 코드를 한번 작성해볼까 라는 생각.

보통 오전에 일어나서 알고리즘 문제부터 푸는걸 습관화시키고 있는데, 마침 오늘 풀었던 알고리즘 문제 중

난수 관련 문제가 있어서, 그런 생각이 들었는지도 모르겠다.

 

 

 

 

 

문제 해결방법

정수 min부터 max(포함) 사이에 난수를 생성하는 코드다.

Math.floor(Math.random() * (max-min + 1)) + min

 이 난수를 생성하는 코드를 이용해, 여러개의 이미지를 하나의 배열에 담아 난수를 배열의 인덱스로 사용했다.

 

const images = ['0.jpeg', '1.avif', '2.jpg'];

const bgImage = document.createElement('img');
document.body.appendChild(bgImage);
bgImage.classList.add('bgImg');

function randomBackImg() {
  const chosenImage = images[Math.floor(Math.random() * images.length)];
  bgImage.src = `img/${chosenImage}`;
}

randomBackImg();
setInterval(randomBackImg, 5000);

 

<img>의 src를 랜덤하게 변경하기 위한 randomBackImg( )라는 함수를 작성했고,

이를 일정한 간격으로 반복시키기 위해 setInterval( )함수를 활용했다.

 randomBackImg( )를 미리 한번 실행시킨 이유는 처음 사이트가 로딩될 때를 위함이다. setInterval함수의 간격을 5000ms로 설정했기에 5초마다 백그라운드 이미지가 변경된다

 

'TIL' 카테고리의 다른 글

TIL-24.04.19  (0) 2024.04.19
TIL-24.04.18  (0) 2024.04.18
TIL-24.04.16  (0) 2024.04.16
TIL.23.06.28  (0) 2023.06.29
TIL-23.06.27  (0) 2023.06.27