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() 메소드 내장 자바스크립트를 사용하여 임의의 색상 문자열을 반환합니다.