안녕하세요
오늘은 이미지 띄우기 할거에요.
우선 html
<!DOCTYPE html>
<html>
<head>
<title>something</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<script src="bg.js"></script>
</body>
</html>이번엔 body전체에 넣어줄 거기 때문에 이렇습니다.
그담은 js코드
const body = document.querySelector("body");
const IMG_SU = 5; //이미지 개수
function img(num){
const image = new Image(); //이미지 객체 생성 이미지의 요소들 사용가능
image.src = `image/${num+1}.jpg`; //image폴더에서 이미지 가져오기
body.prepend(image);
}
function getRandom(){
const number = Math.floor(Math.random()*IMG_SU);
return number;
}
function init(){
const randomNumber = getRandom(); //랜덤 숫자 받기
img(randomNumber);
}
init();엄청 간단합니다.
image폴더에
다음과 같은 이름으로 설정 해줬습니다.
Math.random()은 0~1사이의 랜덤 수를 주기 때문에
랜덤 수에 이미지 개수 곱하고 소수점 밑으로 다 버리면
우리가 원하는 1~5까지의 숫자를 얻을 수 있습니다.
이렇게 이미지를 띄우실 수 있어요.
크기가 엄청 크게 들어가는데 그건
각자 해보는걸로요! ㅎㅎ
오늘은 여기까지 하겠습니다.
태클은 언제나 환영!
틀린게 많을 거 같아요 태클 마구마구 걸어주세요
:)
'자바스크립트()' 카테고리의 다른 글
| javascript#2 local저장소 이용하기 (0) | 2021.05.26 |
|---|---|
| javascript#1 시간 출력 (0) | 2021.05.25 |
