JavaScript でランダムな色を生成する
この記事では、JavaScript の組み込み数学関数と UI（ユーザーインターフェイス）用の JQuery ライブラリを使用して、HTMLWeb ページ onClick の背景色をランダムに変更する例を示します。数学関数を使用すると、簡単に floor や ceiling のような丸められた値を簡単に取得でき、math.random() を使用してランダムな値を取得できます。
HTML で Math.floor(Math.random()) を使用して JavaScript を使用してランダムな色を生成する
getRandomColor メソッドは、ユーザーが背景色の変更ボタンを押すたびにトリガーされます。このメソッドは、JQuery を使用して、背景色を変更する HTMLWeb ページの body タグに CSS スタイルを割り当てます。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Random colors</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body id ="bodyId" >
<Div style="text-align: center; width: 100%;">
<H1>Generate Random Color using JavaScript/jquery</H1>
<button onclick="getRandomColor()">Change background color</button>
</Div>
</body>
<script>
//The ColorCode() will give the code every time.
function ColorCode() {
var makingColorCode = '0123456789ABCDEF';
var finalCode = '#';
for (var counter = 0; counter < 6; counter++) {
finalCode =finalCode+ makingColorCode[Math.floor(Math.random() * 16)];
}
return finalCode;
}
//Function calling on button click.
function getRandomColor() {
$("#bodyId").css("background-color", ColorCode());
}
</script>
</html>
上記の HTML ページのソースでは、doctypehtml で JQuery ライブラリを使用するために必要な <script> タグに JQuery リンクが表示されています。次のステップでは、関数 getRandomColor() が、プロパティ background-color を持つ CSS スタイルを割り当てる関数 ColorCode() と呼ばれる別の関数内の <script> タグ内で宣言されます。
関数 ColorCode() には、16 進値の文字列が順番に含まれています（0-F）。for ループを使用して、指定された条件が真になるまでコードステートメントを実行しました。この場合、満たされる条件は var counter = 0; counter < 6; counter++。
そのループは、ランダムな値を 6 の長さの # と連結することによって finalCode 文字列を生成し、次にその finalCode 文字列を返し、それを色属性として使用します。
与えられた HTML コードを調べます
getRandomColor メソッドを理解するには、次の 4つの簡単な手順に従ってください。
-
テキストドキュメントを作成します。メモ帳やその他のテキスト編集ツールを使用できます。
-
指定されたコードを作成されたテキストファイルに貼り付けます。
-
拡張子
.htmlでそのテキストファイルを保存し、デフォルトのブラウザで開きます。 -
Change background colorボタンが表示されます。そのボタンを使用して、背景色をランダムに変更できます。
JavaScript でランダムな色の結果を取得する別の方法
以下に示すように、1 行のコードを使用して JavaScript でランダムな色を選択することもできます。コードの長さを最小限に抑えて時間/メモリを節約し、効率的な結果を提供します。
function generateRandomCode() {
var myRandomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
return myRandomColor;
}
// will generate any random color
どちらの例でも、generateRandomCode() と ColorCode() は、6 の長さの値を組み合わせた javaScript 組み込みメソッド Math.random() を使用して、ランダムな色の文字列を返します。