집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript를 사용하여 임의의 색상을 생성하는 간단한 방법

JavaScript를 사용하여 임의의 색상을 생성하는 간단한 방법

小云云원래의: 2018-02-07 11:23:432955검색

이 글에서는 자바스크립트 난수 및 문자열 연산과 관련된 구현 기술과 페이지 요소 속성의 동적 연산을 포함하여 자바스크립트에서 간단하게 무작위 색상을 생성하는 방법을 주로 소개합니다. 너.

다음과 같은 효과를 내고 싶다면 웹페이지를 새로고침할 때마다 색상이 생성됩니다

사실 랜덤 색상을 생성하는 기본 핵심은 매우 간단합니다. -digit JavaScript 난수

그리고 이 6자리 숫자의 각 자리는 0~f 내에 있으므로 다음과 같은 방법이 있습니다.

1. 먼저 p 태그를 사용하여 현재 색상을 입력합니다. p의 배경색은 Color

<!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를 사용하여 임의의 색상을 생성하는 간단한 방법

관련 기사