기록하는 개발자

[VanillaJS] Google Chrome App Momentum 만들기 - 3-2. Random Background Image 본문

Web/Javascript

[VanillaJS] Google Chrome App Momentum 만들기 - 3-2. Random Background Image

밍맹030 2021. 8. 3. 17:26
728x90

아래와 같이 refresh 할 때마다 배경 사진이 바뀌는 기능을 추가해보자.

< HTML >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet", href="css/style.css">
    <title>Momentum</title>
</head>
<body>
    <!--input의 유효성 검사를 작동시키기 위해서는 form 태그를 사용해야한다.-->
    <form class="hidden" id="login-form"> 
        <input required maxlength="15" type="text" placeholder="What is your name?">
        <button>Log in</button>
    </form>

    <h2 id="clock"> 00:00:00</h2>
    <h1 class="hidden" id="greeting"></h1>
    <br>
    <div id="quote">
        <span></span>
        <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>

 

< background.js >

const images=["img1.jpg","img2.jpg","img3.jpg"];

const chosenImage = images[Math.floor(Math.random()*images.length)];

const bgImage = document.createElement("img");

bgImage.src = `img/${chosenImage}`;

document.body.appendChild(bgImage);

 

 

1. random image 저장

   - 필요한 이미지를 프로젝트 폴더 내 img 폴더를 생성해 한 데 모아둔다.

   - string type의 배열 images 에 저장한 이미지 파일의 이름을 동일하게 저장한다.

   - floor, random 함수를 이용해 배열에서 이미지를 하나 꺼내고

   이를 변수 chosenImage에 저장한다.

 

 

 

2. html에 img 적용하기

   - document.createElement를 이용해 img 태그를 생성해 변수 bgImage에 저장한다.

   - 아래 형식처럼 만들기위해 저장한 chosenImage를 img 태그 내 src 를 지정한다.

           <img src="img/img1.jpg">

   - 생성한 img 태그는 아직 html 내에 존재하지 않는다.

      따라서 appendChild 함수를 이용해 html  파일의 body에 새로 만든 img 태그를 추가한다.

728x90
저작자표시

'Web > Javascript' 카테고리의 다른 글

[VanillaJS] Google Chrome App Momentum 만들기 - 4-2. Checklist Delete  (0) 2021.08.05
[VanillaJS] Google Chrome App Momentum 만들기 - 4-1. Checklist Load  (0) 2021.08.04
[VanillaJS] Google Chrome App Momentum 만들기 - 3-1. Random Quotes  (0) 2021.08.03
[VanillaJS] Google Chrome App Momentum 만들기 - 2. Clock  (0) 2021.08.03
[Vanilla JS] Google Chrome App Momentum 만들기 - 1. Log In  (0) 2021.08.02
'Web/Javascript' Related Articles more