random

💡 급하게 하지 말고 하나씩 흐름을 파악하기❗❗

사용한 내장 함수

◾ Math.floor() = 소수점 버리기

◾ Math.random() = 메서드는 0보다 크거나 같고 1보다 작은 부동 소수점 의사 난수를 반환

◾ length = 길이

◾ linear-gradient = 그라데이션

1. html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>그라데이션</title>
    <link rel="stylesheet" href="./css/challege1.css" />
  </head>
  <body>
    <button class="btn">Give me color</button>

    <script src="./js/index.js"></script>
  </body>
</html>

2. js

const btn = document.querySelector("button");
const colors = [
    "#ef5777",
    "#575fcf",
    "#4bcffa",
    "#34e7e4",
    "#0be881",
    "#f53b57",
    "#3c40c6",
    "#0fbcf9",
    "#00d8d6",
    "#05c46b",
    "#ffc048",
    "#ffdd59",
    "#ff5e57",
    "#d2dae2",
    "#485460",
    "#ffa801",
    "#ffd32a",
    "#ff3f34",
];

function clickrandomcolor() {
    const nowColor1 = colors[Math.floor(Math.random() * colors.length)];
    const nowColor2 = colors[Math.floor(Math.random() * colors.length)];
    document.body.style.background = `linear-gradient(to right, ${nowColor1},${nowColor2})`;
    
}

btn.addEventListener("click", clickrandomcolor) ;

3. CSS

body {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;   
}

.btn {
    font-size: 30px;
}

✳ 하나씩 살펴보자

const btn = document.querySelector("button");

-> 쿼리셀로 엘리먼트 button 불러오기

const colors = [
    "#ef5777",
    "#575fcf",
    "#4bcffa",
    "#34e7e4",
    "#0be881",
    "#f53b57",
    "#3c40c6",
    "#0fbcf9",
    "#00d8d6",
    "#05c46b",
    "#ffc048",
    "#ffdd59",
    "#ff5e57",
    "#d2dae2",
    "#485460",
    "#ffa801",
    "#ffd32a",
    "#ff3f34",
];

-> colors 라는 변수 안에 배열을 만들고 사용할 컬러들을 집어넣기

function clickrandomcolor() {
    const nowColor1 = colors[Math.floor(Math.random() * colors.length)];
    const nowColor2 = colors[Math.floor(Math.random() * colors.length)];
    document.body.style.background = `linear-gradient(to right, ${nowColor1},${nowColor2})`;
}

-> 함수를 만들고 그 안에 랜덤 컬러 두 가지의 변수를 만들기

-> 미리 만들어 둔 컬러들을 가지고 와야 한다.

-> Math.random()를 사용하면 된다.
(그런데 이 메소드는 0~1까지의 숫자를 0.132323, 0.545354. 0.656456 ... 이런식으로 출력 하는데..)

-> Math.floor 로 소수점을 날려준다.

-> 배열의 수만큼 랜덤을 돌리기 때문에 배열의 길이만큼 곱해주면 된다.

btn.addEventListener("click", clickrandomcolor) ;

-> 이벤트리스너로 click 가져오기

저작자표시

후야

random

💡 급하게 하지 말고 하나씩 흐름을 파악하기❗❗

티스토리툴바