자바스크립트 코드: 사진 랜덤으로 보여주기

사진 라이브러리에 사진이 100개 있는데, 이 중 5개를 랜덤으로 골라서 보여주는 자바스크립트 코드를 작성해드리겠습니다.

const photoLibrary = ['photo1.jpg', 'photo2.jpg', 'photo3.jpg', 'photo4.jpg', 'photo5.jpg', 'photo6.jpg', 'photo7.jpg', 'photo8.jpg', 'photo9.jpg', 'photo10.jpg', 'photo11.jpg', 'photo12.jpg', 'photo13.jpg', 'photo14.jpg', 'photo15.jpg', 'photo16.jpg', 'photo17.jpg', 'photo18.jpg', 'photo19.jpg', 'photo20.jpg', 'photo21.jpg', 'photo22.jpg', 'photo23.jpg', 'photo24.jpg', 'photo25.jpg', 'photo26.jpg', 'photo27.jpg', 'photo28.jpg', 'photo29.jpg', 'photo30.jpg', 'photo31.jpg', 'photo32.jpg', 'photo33.jpg', 'photo34.jpg', 'photo35.jpg', 'photo36.jpg', 'photo37.jpg', 'photo38.jpg', 'photo39.jpg', 'photo40.jpg', 'photo41.jpg', 'photo42.jpg', 'photo43.jpg', 'photo44.jpg', 'photo45.jpg', 'photo46.jpg', 'photo47.jpg', 'photo48.jpg', 'photo49.jpg', 'photo50.jpg', 'photo51.jpg', 'photo52.jpg', 'photo53.jpg', 'photo54.jpg', 'photo55.jpg', 'photo56.jpg', 'photo57.jpg', 'photo58.jpg', 'photo59.jpg', 'photo60.jpg', 'photo61.jpg', 'photo62.jpg', 'photo63.jpg', 'photo64.jpg', 'photo65.jpg', 'photo66.jpg', 'photo67.jpg', 'photo68.jpg', 'photo69.jpg', 'photo70.jpg', 'photo71.jpg', 'photo72.jpg', 'photo73.jpg', 'photo74.jpg', 'photo75.jpg', 'photo76.jpg', 'photo77.jpg', 'photo78.jpg', 'photo79.jpg', 'photo80.jpg', 'photo81.jpg', 'photo82.jpg', 'photo83.jpg', 'photo84.jpg', 'photo85.jpg', 'photo86.jpg', 'photo87.jpg', 'photo88.jpg', 'photo89.jpg', 'photo90.jpg', 'photo91.jpg', 'photo92.jpg', 'photo93.jpg', 'photo94.jpg', 'photo95.jpg', 'photo96.jpg', 'photo97.jpg', 'photo98.jpg', 'photo99.jpg', 'photo100.jpg'];

const randomPhotos = [];

while (randomPhotos.length < 5) {
  const randomIndex = Math.floor(Math.random() * photoLibrary.length);
  if (!randomPhotos.includes(photoLibrary[randomIndex])) {
    randomPhotos.push(photoLibrary[randomIndex]);
  }
}

for (let i = 0; i < randomPhotos.length; i++) {
  const img = document.createElement('img');
  img.src = randomPhotos[i];
  document.body.appendChild(img);
}

위 코드를 사용하면, photoLibrary 배열에서 랜덤으로 5개의 사진을 선택하여 화면에 보여줄 수 있습니다. img 태그를 사용하여 이미지를 생성하고, document.body.appendChild 함수를 사용하여 이미지를 화면에 추가합니다.

이 코드에서 사용된 Math.random() 함수는 0과 1 사이의 난수를 생성합니다. Math.floor() 함수는 소수점 이하를 버리고 정수만을 반환합니다. 따라서 Math.floor(Math.random() * photoLibrary.length)은 0부터 photoLibrary 배열의 길이-1 사이의 임의의 정수를 반환합니다.

randomPhotos 배열에 이미 존재하는 사진은 중복해서 추가되지 않도록 !randomPhotos.includes(photoLibrary[randomIndex])로 중복검사를 수행합니다.

이제 당신은 자바스크립트를 사용하여 사진 라이브러리에서 랜덤으로 5개의 사진을 선택할 수 있습니다!

추천 글