ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用してランダムな色を生成する簡単な方法

JavaScript を使用してランダムな色を生成する簡単な方法

小云云オリジナル: 2018-02-07 11:23:432865ブラウズ

この記事では、JavaScript で単純にランダムな色を生成する方法を中心に、JavaScript の乱数と文字列操作、ページ要素の属性の動的操作に関する実装テクニックを紹介します。。

次の効果を作りたい場合は、Web ページを更新するたびに色が生成されます

実際、ランダムな色を生成する基本的な核心は、ランダムに 6 色を構築することです。 -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 を使用してランダムな色を生成する簡単な方法

関連記事