JavaScript | HEXカラーコードをランダム生成する
![JavaScript | HEXカラーコードをランダム生成する](https://1-notes.com/wp-content/uploads/2021/01/ランダムなHEXカラーコードを生成する方法.png)
JavaScriptを使ってランダムなHEXカラーコードを生成する方法の紹介です。
See the Pen JavaScript | Randomly generate HEX color code by yochans (@yochans) on CodePen.
HEXカラーコードをランダム生成
HEXカラーコードをランダム生成するサンプルコードです。
let color = '#'+Math.floor(Math.random()*16777215).toString(16);
以下は上記動作サンプルのHTML、JavaScriptコードになります。
<p id="output"></p>
サンプルでは、ループ処理で複数のランダムカラーコードを生成しながら<div>要素をHTMLに追加しています。
for (let i = 0; i < 198; i++) {
let color = '#'+Math.floor(Math.random()*16777215).toString(16);
output.innerHTML += `<div class="colors" style="background-color:` + color + `">` + color + `</div>`;
}
カラーコードランダム生成の実行結果の画像
![HEXカラーコードのランダム生成](https://1-notes.com/wp-content/uploads/2021/01/HEXカラーコードのランダム生成.png)
![HEXカラーコードのランダム生成](https://1-notes.com/wp-content/uploads/2021/01/HEXカラーコードのランダム生成.png)
ディスカッション
コメント一覧
まだ、コメントがありません