이 글에서는 JavaScript 난수 및 문자열 연산과 페이지 요소 속성 관련 구현 기술의 동적 연산을 포함하여 간단한 무작위 색상 생성을 달성하는 JavaScript 방법을 주로 소개합니다.
이 글의 예는 설명합니다. JavaScript Random color 방법의 간단한 생성. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.
다음 효과를 만들고 싶다면 웹 페이지를 새로 고칠 때마다 색상이 생성됩니다
실제로는 매우 간단합니다. 랜덤 색상 생성의 기본 핵심은 6자리 숫자를 무작위로 생성하는 것인데, 자바스크립트의 난수 문제
그리고 이 6자리 숫자의 각 자리는 0~f 내에 있으므로 다음과 같은 방법이 있습니다.
1 . 첫 번째는 HTML 레이아웃이며 p 태그는 현재 색상, p의 배경색은 다음 색상입니다
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>randomColor</title> </head> <body> <p id="colorStr"></p> <p id="p1" style="width:100px;height:100px"></p> </body> </html>
2. 그 다음은 핵심 스크립트입니다:
<script> //颜色字符串 var colorStr=""; //字符串的每一字符的范围 var randomArr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']; //产生一个六位的字符串 for(var i=0;i<6;i++){ //15是范围上限,0是范围下限,两个函数保证产生出来的随机数是整数 colorStr+=randomArr[Math.ceil(Math.random()*(15-0)+0)]; } document.getElementById("colorStr").innerHTML="颜色为:#"+colorStr; document.getElementById("p1").style.backgroundColor="#"+colorStr; </script>.
위 내용은 JavaScript를 사용하여 임의의 색상을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!