[책] 자바스크립트 코드 레시피 278 - 17일차

임의의 수 다루기

• 임의의 확률을 사용해 작업을 처리하고 싶을 때
• 애니메이션에 임의의 값을 부여하고 싶을 때

구문

  Math.random();

콘솔창에 출력하고 새로고침하면 값이 임의로 반환됩니다.

  console.log(Math.random());

실습

버튼을 누를 때마다 색상을 임의로 바꾸는 코드를 통해 Math.random() 을 알아봅시다.

index.html

  <button class="button">색상 변경</button>
  <div class="rectangle"></div>

style.css

  .button {
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 10px;
    color: #000;
    cursor: pointer;
    width: 120px;
  }

  .rectangle {
    width: 300px;
    height: 300px;
    --start: hsl(0, 100%, 50%);
    --end: hsl(322, 100%, 50%);
    background-image: linear-gradient(-135deg, var(--start), var(--end));
  }

script.js

window.onload = function () {
  const rectangle = document.querySelector('.rectangle');
  const button = document.querySelector('button');

  clickButton();

  function clickButton() {
    const randomHue = Math.trunc(Math.random() * 360);
    const randomColorStart = `hsl(${randomHue}, 100%, 50%)`;
    console.log(randomColorStart);
    const randomColorEnd = `hsl(${randomHue + 40}, 100%, 50%)`;

    rectangle.style.setProperty('--start', randomColorStart);
    rectangle.style.setProperty('--start', randomColorEnd);
  }

  button.addEventListener('click', clickButton);
}