새로고침을 했을때 무작위로 배경사진을 보여주고 싶다.
폴더 디렉토리 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum App</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<form id="login-form" class="hidden">
<input
required
maxlength="10"
type="text"
placeholder="What is your name?" />
<input type="submit" value="Log In" />
</form>
<h2 id="clock">00:00</h2>
<h1 id="greeting" class="hidden"></h1>
<div id="quotes">
<span></span><br/>
<span></span>
</div>
<script src="JS/greetings.js"></script>
<script src="JS/clock.js"></script>
<script src="JS/Quotes.js"></script>
<script src="JS/background.js"></script>
</body>
</html>이런 HTML에 img 태그를 추가하려면 어떻게 해야할까?
먼저 이미지 이름이 담긴 배열을 만들어준다.
const images = ["background1.jpeg","background2.jpeg","background3.jpeg"]이후에 이전 포스팅에서 사용했던 방식과 마찬가지로 0~1사이의 숫자를 random 함수로 가져와 소수점 뒷자리를 floor 함수를 이용해 정수로 만들어주고 거기에 배열의 길이를 곱해 무작위성을 더해준다.
const chosenImage = images[Math.floor(Math.random() * images.length]);
const bgImage = document.createElement("img");이후에 document객체의 createElement("img") 라는 구문으로 img 태그를 생성해준다.
bgImage.src = `img/${chosenImage}`이후에 html에 무작위성 이미지를 출력하기 위해 appendChild 함수를 사용한다.
document.body.appendChild(bgImage);결과:
새로고침하면 이미지태그가 추가되어 랜덤한 이미지가 출력된다!
프론트엔드 개발자 지망생