JavaScript에서 임의 색상 생성

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript에서 임의 색상 생성
Muhammad Muzammil Hussain 2023년10월12일
JavaScript JavaScript Random
  1. Math.floor(Math.random())를 사용하여 HTML에서 JavaScript를 사용하여 임의 색상 생성
  2. JavaScript에서 임의의 색상 결과를 얻는 다른 방법
JavaScript에서 임의 색상 생성

이 기사에서는 JavaScript 내장 Math 함수와 UI(사용자 인터페이스)용 JQuery 라이브러리를 사용하여 HTML 웹 페이지 onClick의 배경색을 무작위로 변경하는 방법을 예로 들어 설명합니다. Math 함수를 사용하면 반올림된 값을 바닥과 천장으로 쉽게 얻을 수 있고 math.random()을 사용하여 임의의 값을 얻을 수 있습니다.

Math.floor(Math.random())를 사용하여 HTML에서 JavaScript를 사용하여 임의 색상 생성

getRandomColor 메소드는 사용자가 Change background color 버튼을 누를 때마다 트리거됩니다. 이 방법은 배경색을 변경할 HTML 웹 페이지의 body 태그에 CSS 스타일을 할당하기 위해 JQuery를 사용합니다.

<!DOCTYPE html>
<html lang="en">
<head>

<title>Random colors</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body id ="bodyId" >
<Div style="text-align: center; width: 100%;">
<H1>Generate Random Color using JavaScript/jquery</H1>
<button onclick="getRandomColor()">Change background color</button>
</Div>

</body>
<script>
   //The ColorCode() will give the code every time.
   function ColorCode() {
      var makingColorCode = '0123456789ABCDEF';
      var finalCode = '#';
      for (var counter = 0; counter < 6; counter++) {
         finalCode =finalCode+ makingColorCode[Math.floor(Math.random() * 16)];
      }
      return finalCode;
   }
   //Function calling on button click.
   function getRandomColor() {
      $("#bodyId").css("background-color", ColorCode());
   }
</script>
</html>

위의 HTML 페이지 소스에서 <script> 태그에서 doctype html의 JQuery 라이브러리를 사용하는 데 필요한 JQuery 링크를 볼 수 있습니다. 다음 단계에서 기능getRandomColor()는 속성 background-color가 있는 CSS 스타일을 할당하는 기능ColorCode()라는 다른 함수 내부의 <script> 태그 내부에 선언됩니다.

기능 ColorCode()에는 주어진 조건이 참이 될 때까지 for 루프를 사용하여 코드 문을 실행하는 시퀀스(0-F)의 16진수 10진수 값 문자열이 포함됩니다. 이 경우 충족되어야 하는 조건은 var counter = 0; 카운터 < 6; 카운터++.

이 루프는 # 길이가 6인 임의의 값을 연결하여 finalCode 문자열을 생성한 다음 해당 finalCode 문자열을 반환하고 이를 색상 속성으로 사용합니다.

주어진 HTML 코드 검사

getRandomColor 방법을 이해하려면 다음 4가지 간단한 단계를 따르십시오.

  • 텍스트 문서를 만듭니다. 메모장이나 다른 텍스트 편집 도구를 사용할 수 있습니다.
  • 생성된 텍스트 파일에 주어진 코드를 붙여넣습니다.
  • 확장자가 .html인 텍스트 파일을 저장하고 기본 브라우저에서 엽니다.
  • Change background color 버튼을 볼 수 있습니다. 해당 버튼을 사용하여 배경색을 임의로 변경할 수 있습니다.

JavaScript에서 임의의 색상 결과를 얻는 다른 방법

아래와 같이 한 줄의 코드를 사용하여 JavaScript에서 임의의 색상을 선택할 수도 있습니다. 코드 길이를 최소화하여 시간/메모리를 절약하고 효율적인 결과를 제공합니다.

function generateRandomCode() {
  var myRandomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  return myRandomColor;
}
// will generate any random color

두 예에서 generateRandomCode() 및 ColorCode()는 6 길이 값의 조합과 함께 Math.random() 메소드 내장 자바스크립트를 사용하여 임의의 색상 문자열을 반환합니다.