집 > 기사 > 웹 프론트엔드 > JavaScript를 사용하여 임의의 색상을 구현하는 방법

JavaScript를 사용하여 임의의 색상을 구현하는 방법

黄舟원래의: 2017-09-22 09:18:552682검색

이 글에서는 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=[&#39;0&#39;,&#39;1&#39;,&#39;2&#39;,&#39;3&#39;,&#39;4&#39;,&#39;5&#39;,&#39;6&#39;,&#39;7&#39;,&#39;8&#39;,&#39;9&#39;,&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;];
  //产生一个六位的字符串
  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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：$q 비동기 작업에 버튼을 사용하는 방법은 무엇입니까?다음 기사：$q 비동기 작업에 버튼을 사용하는 방법은 무엇입니까?