コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用してランダムな色を生成する簡単な方法

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

小云云
リリース： 2018-02-07 11:23:43
オリジナル
2937 人が閲覧しました

この記事では、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>
ログイン後にコピー

関連推奨事項:

php でランダムな色を生成する簡単な方法

php コードを取得するランダムな色を取得します

エリアで生成されたランダムな色を取得します

以上がJavaScript を使用してランダムな色を生成する簡単な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript js 単純
ソース：php.cn
前の記事：jQuery は 2 つの div でボタンの位置を交換するためのコード共有を実装します。 次の記事：Web ページ上の任意の場所をクリックして新しいウィンドウを開き、ウィンドウを閉じるための JavaScript 実装コード
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート