JavaScript でランダムな HEX カラーを生成するにはどうすればよいですか? 【簡単ガイド】

この記事では、数字とアルファベットの組み合わせで構成されるランダムな 16 進カラー コードを生成する JavaScript 関数の作成方法を説明します。

この関数は実行されるたびにランダムな 16 進カラーを生成します:

リーリー

1. 乱数の生成

最初のステップでは乱数を生成する必要がありますが、それは JavaScript Math オブジェクトと Math random() メソッドを使用して簡単に行うことができます。

通常のランダムメソッドを作成すると、ランダムな10進数が得られます。以下の例を参照してください:

リーリー

しかし、0 から 16777215 までの乱数を生成する必要があります。「999999」やその他の 6 桁の数字ではなく、なぜ 16777215 が必要なのかと思われるかもしれません。16,777,215 という数字は、 6 桁の 16 進数のカラー コードで指定できる最大値。

16 進数のカラー コードは 6 桁を使用し、各桁は 0 ～ 9 または A ～ F であり、各桁に 16 個の選択肢があります。

これは、6 桁で合計 16,777,216 の異なる色を作成できることを意味します。最大の 16 進カラー コードは #FFFFFF で、10 進数では 16,777,215 に相当します。

したがって、

16,777,215 までの数値を使用すると、アルファベット文字を含む色を含め、6 桁の 16 進コードで表されるすべての可能な色をカバーできます。これにより、数字や文字を使用するかどうかに関係なく、考えられるすべての色が確実に含まれるようになります。

整数を取得し、小数値を避けるために、Math.random() メソッドを Math.floor() 内にラップすることを忘れないでください。

リーリー

2.数値を16進数の文字列に変換する

リーリー

次に、数値を 16 進数の文字列に変換する必要があります。これは、toString(16) メソッドを使用して簡単に行うことができます。

単純に乱数に対して toString(16) メソッドを使用し、引数として 16 を渡して 16 進文字列に変換します。

このメソッドにより、結果のコードには 0 から F までの数字と文字のみが含まれ、F を超える文字は含まれなくなります。

こちらもお読みください

: Next.js の Google Analytics トラッキング コード [セットアップ ガイド] 3.padStartメソッドを追加

関数はほぼ完成しました。ただし、潜在的な問題があります。生成される 16 進カラー コードの長さが 6 文字ではなく、わずか 5 文字になる場合があります。

関数が 5 文字の 16 進数のカラーコードを返した場合、そのコードは無効になります。これを修正し、常に 6 文字の 16 進数のカラー コードを取得できるようにするには、padStart メソッドをコードに追加する必要があります。

padStart(6, '0') メソッドは、必要に応じて先頭にゼロを追加することで、カラー コードが常に 6 桁のコードになるようにします。

たとえば、16 進コードが A9A9A で、5 文字しか含まれていない場合、padStart(6, '0') メソッドは先頭に 0 を追加して 6 桁のカラー コードにし、結果は 0A9A9A になります。これにより、関数は常に正確に 6 文字を含む適切にフォーマットされた 16 進カラー コードを返すようになります。

4. 生成された 16 進コードを返します

最後のステップは、必要なときに簡単に使用できるように、生成されたランダムな 16 進カラー コードを返すことです。

テンプレート文字列を使用してカラーコードをラップし、先頭に#を追加したいので、この機能を使用するたびに#を手動で追加する必要がありません。

リーリー
結論

初めて JavaScript でランダム 16 進カラー ジェネレーターを作成したとき、アルファベット文字が含まれていなかったため、暗い色または鈍い色しか生成されませんでした。

コードにいくつかの変更を加えた後、最終的に望ましい結果が得られました。また、この投稿が同様の関数を作成する時間を節約できることを願っています。

新しいプロジェクトを探している、または JavaScript を使用して何かを構築したいと考えている友達とこの投稿を共有してください!

こちらもお読みください: HTML コードを削除せずに無効にする方法 [3 つの方法]

以上がJavaScript でランダムな HEX カラーを生成するにはどうすればよいですか? 【簡単ガイド】の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。