[ JS : 실습 : Random Image Background ]

Teasan·2020년 12월 6일
0

JavaScript

목록 보기
11/15
post-thumbnail

📍 Javascript를 공부했을 때 학습노트에 정리해둔 것을 옮겨왔다.

배경 이미지가 새로고침 될 때마다 Math(모듈)을 이용하여 랜덤으로 배경 이미지가 변화하는 기능을 구현해보자.

Math.random( )

랜덤 숫자를 임의적으로 만들어내는 명령어.

  • 1~5까지의 랜덤 숫자를 임의적으로 만들어내려면
    <Math.random( )> * 5

  • 소수점을 제외한 임의적 랜덤 숫자를 얻고 싶다면 ( 내림 )
    <Math.floor( )>

  • Math.floor(3.9) : (3.2, 3.1, 3.9 전부 나머지를 버리고(내림 함수를 써서) 3이 되게 만든다는 뜻이다.)

  • 소수점을 제외한 임의적 랜덤 숫자를 얻고 싶다면 ( 올림 )
    <Math.ceil( )>

  • Math.ceil(3.9) : (3.2, 3.1, 3.9 전부 나머지를 버리고(올림 함수를 써서) 4가 되게 만든다는 뜻이다.)

Step 1. 원하는 이미지(갯수 안에서)를 랜덤으로 설정해보자.

  • Math.floor(Math.random( ) * 7); 7개의 이미지를 랜덤으로 설정 \
const body = document.querySelector("body”);

// 이미지 갯수 설정
const IMG_NUMBER = 7;

// 랜덤 숫자 생성 함수
function genRandom() {
    const number = Math.floor(Math.random() * 7);
    return number;
}

// 최종 실행 함수
function init() {
    const randomNumber = ;
}
init();

더 간결한 코드로 작성할 수도 있다.

const body = document.querySelector("body”);
const IMG_NUMBER = 7;

function genRandom() {
    const number = Math.floor(Math.random() *IMG_NUMBER);
    return number;
}

function init() {
    // 랜덤 숫자 생성 함수를 변수로 선언하기
    const randomNumber = genRandom();
}
init();

Step 2. 이미지를 가져오기.

const body = document.querySelector("body”);

const IMG_NUMBER = 7;

/* 이미지를 가져오는 함수 */
function paintImage(imgNumber) {
    /* 1. new 를 사용하여 object 만들기 */
    const image = new Image();
    /* 2. object에 이미지 주소(레퍼런스) 연결하기 */
    image.src = `images/${imgNumber + 1}.jpg`;
    // + 1를 하는 이유는 Math.random() 함수가 0을 줄 수 있기 때문이다.
    /* body 안에 image 넣기 */
    body.prepend(image);
}

function genRandom() {
    const number = Math.floor(Math.random() *IMG_NUMBER);
    return number;
}

function init() {
    const randomNumber = genRandom();

   /* 이미지(갯수) 함수와 randeomNumber변수(랜덤숫자생성함수)를 인자로 설정 */
    paintImage(randomNumber);

}
init();


Step 3
. Style 작업 진행하기

  • javascript
const body = document.querySelector("body”);
const IMG_NUMBER = 7;

/* 이미지를 가져오는 함수 */
function paintImage(imgNumber) {
    const image = new Image();
    image.src = `images/${imgNumber + 1}.jpg`;
    // image에 class 지정하기 (css에서 작업하기 위한 용도) 
    image.classList.add('bgImage');
    body.prepend(image);
}
  • css
/* 배경이미지 애니메이션 style 설정 */
@keyframes fadeIn {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}

.bgImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    animation: fadeIn .5s linear;
}
profile
일단 공부가 '적성'에 맞는 개발자. 근성있습니다.

1개의 댓글

comment-user-thumbnail
2021년 3월 23일

혹시 이미지를 중앙정렬 할 수 있는 방법이 있을까요.. 아니면 백그라운드이미지로.. 할 수 있는 방법이..

답글 달기