ランダムカラージェネレータ – JavaScript

このチュートリアルでは、JavaScript でランダムな色を生成する手順を示します。

JavaScript でランダムな色を生成する方法は?

JavaScript でランダムな色を生成するには、「 数学.乱数()*16 これは、ランダムな色を作成するために使用できるランダムな 16 進数値を生成する 1 つの方法であるためです。

例 1: ランダムな色を生成する
HTML ファイルでは、コンテナーを作成し、ボタンのクリック時にランダムな色を生成する 要素を追加します。

< スパンID = 「カラーコンテナ」 >
< ボタン ID = 「ボタン」 > クリックしてランダムな色を生成 ボタン >
スパン >

次に、以下のコードを JavaScript ファイルまたは

---

• まず、関数を定義しました “ colorGenerator() 」を作成する場所「 16 進数 」 0 ～ 9 および A ～ F の 16 進数の配列。
• 変数を作成する」 カラーコード 」。
• 次に、「 ために 」ループ、反復ごとに、「 算数 」 オブジェクトは、0 から 16 までの乱数を生成します。
• 結果のインデックス番号を「hexDigits」に渡し、対応するインデックス値を「colorCode」変数に格納します。
• このプロセスを 6 回繰り返して、6 桁のコードを作成します。
• 最後に、このコードを「 # 」に署名して関数に戻ります。

次に、「 addEventListener() 」ボタンのクリックイベントのメソッド。定義された関数を呼び出します “ colorGenerator() 体全体の背景色を変更するには：

ボタン。 addEventListener ( 'クリック' 、 ( ) => {
書類。 体 . スタイル . 背景色 = colorGenerator ( ) ;
} ) ;

出力

例 2: コードでランダムな色を生成する
ここでは、対応するランダムに生成されたカラー コードを、「 インナーHTML ' 財産：

ボタン。 addEventListener ( 'クリック' 、 ( ) => {
書類。 体 . スタイル . 背景色 = colorGenerator ( ) ;
書類。 getElementById ( 'カラーコード' ) . インナーHTML = colorGenerator ( ) ;
} ) ;

出力は、本文の関連する背景色に対応するカラー コードを示しています。

以上が、JavaScript のランダム カラー ジェネレーターに関するものでした。

結論

JavaScript でランダムな色を生成するには、「 算数 ” のオブジェクト メソッド ために 」 ループ。各反復で、カラー コードの数字が生成され、変数に後置インクリメントされます。このカラーコードは先頭に「#」を付けて返されます。このチュートリアルでは、JavaScript でランダムな色を生成する手順を示しました。