728x90
페이지를 들어갈 때마다 랜덤하게 배경이 바뀌는 것을 구현
<html />
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>backgroundImg</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<script src="bg.js"></script>
</body>
</html>
<javascript />
//bg.js
const body = document.querySelector("body");
const IMG_NUMBER = 5;
function paintImage(imgNumber) {
const image = new Image();
image.src = `images/${imgNumber + 1}.jpg`; // 가져올 image경로 지정
image.classList.add("bgImage"); // image에 bgImage 클래스 추가
body.appendChild(image); // body의 자식에 image추가
}
function genRandom() {
const number = Math.floor(Math.random() * IMG_NUMBER);
return number;
}
function init() {
const randomNumber = genRandom();
paintImage(randomNumber);
}
init();
Math.floor - 소수점 버림
Math.random - 0 ~ 0.999... 의 값 랜덤 반환
<css />
index.css
body {
background-color: #2c3e50;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.bgImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
animation: fadeIn 0.5s linear;
}
.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 조건부 연산자, AND 연산자, OR 연산자 (0) | 2021.03.05 |
|---|---|
| [JavaScript] 위치, 날씨 정보 가져오기 (0) | 2020.12.23 |
| [JavaScript] to do list 만들기 (localStorage) (2) | 2020.12.23 |
| [JavaScript] localStorage 사용 (0) | 2020.12.22 |
| [JavaScript] 실시간 시간 표시 (0) | 2020.12.22 |