그럼에도 불구하고

👨‍💻

배경색 무작위 조작하기 본문

JavaScript/Function implementation

배경색 무작위 조작하기

zenghyun 2023. 2. 2. 17:24

배경색을 랜덤으로 조작할 수 있는 버튼을 만들어 보자

 

 

 

조건 

1. 버튼을 누르면 배경색을 두 가지 색이 섞인 색으로 변경시켜 준다.

 

2. linear-gradient로 지정되는 색깔 두 개는 같을 수 없다. 

 

3. 만약 같은 색깔 두 개가 선정될 경우 두 번째 색상을 임의로 바꿔준다. 

 

 

소스 코드

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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">
  <title>Document</title>
  <style>
    body {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    button {
      width: 150px;
      height: 100px;
      font-size: 20px;
      font-weight: 600;
    }
  </style>
</head>
 
<body>
  <button>Give me color</button>
  <script>
    const $button = document.querySelector('button');
    const $body = document.querySelector('body');
    let random1;
    let random2;
    $button.addEventListener('click', () => {
      const aryColor = ["#fc8b7e", "#7efc9b", "#a47efc", "#ddec5a", "#f8c244", "#4465f8"];
      random1 = Math.floor(Math.random() * aryColor.length);
      random2 = Math.floor(Math.random() * aryColor.length);
 
      checkNum(random1, random2, aryColor);
 
      $body.style.background = `linear-gradient(135deg,${aryColor[random1]}, ${aryColor[random2]})`;
    });
 
    function checkNum(num1, num2, ary) {
      if (num1 === num2) {
        num2 -= 1;
        num2 < 0 ? num2 = ary.length - 1 : num2;
        changeNum(num2);
      }
      return;
    }
 
    function changeNum(num) {
      random2 = num;
    }
  </script>
</body>
 
</html>
cs

 

 

 

 

Script

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
      const $button = document.querySelector('button');
    const $body = document.querySelector('body');
    let random1;
    let random2;
 
    $button.addEventListener('click', () => {
      const aryColor = ["#fc8b7e", "#7efc9b", "#a47efc", "#ddec5a", "#f8c244", "#4465f8"];
      random1 = Math.floor(Math.random() * aryColor.length);
      random2 = Math.floor(Math.random() * aryColor.length);
 
      checkNum(random1, random2, aryColor);
 
      $body.style.background = `linear-gradient(135deg,${aryColor[random1]}, ${aryColor[random2]})`;
    });
 
    function checkNum(num1, num2, ary) {
      if (num1 === num2) {
        num2 -= 1;
        num2 < 0 ? num2 = ary.length - 1 : num2;
        changeNum(num2);
      }
      return;
    }
 
    function changeNum(num) {
      random2 = num;
    }
 
cs

 

button을 클릭했을 때 변경할 수 있는 color를 배열로 담아놓고 랜덤함수를 통해 random1과 random2에 무작위로 0부터 5까지의 수를 초기화시킨다. 

 

그리고 random1과 random가 같은 숫자일 경우를 검사하기 위해  checkNum 함수를 사용한다. 

 

만약 checkNum 함수에서 확인결과 같을 경우 changeNum 함수에서 random2의 값을 새로운 값으로 변경시켜 준다.

 

 

결과

See the Pen Untitled by zenghyun (@zenghyun) on CodePen.

저작자표시 비영리

'JavaScript > Function implementation' 카테고리의 다른 글

카메라 기능 사용하기  (0) 2023.03.23
이미지 로딩 지연시키기  (0) 2023.03.22
숫자 뽑기 게임  (0) 2023.01.31
Drag & Drop 이용하여 이미지 올리기  (0) 2023.01.26
"selectstart" 글자 돋보기 만들기  (0) 2023.01.10
'JavaScript/Function implementation' Related Articles more
Comments