JavaScriptでランダムに配色を変えるプログラムの作り方

2021年2月26日JavaScript

JavaScriptでランダムに配色を変えるプログラムの作り方を紹介します。

JavaScriptでランダムに配色を変えるソースコード



//乱数を作る
 const randomInt = (min, max) =>
 Math.floor(Math.random() * (max - min + 1) + min);

//テンプレートリテラルで配色を設定する
 const randomColor = () =>
// `rgb(${randomInt(0, 255)}, ${randomInt(0, 255)}, ${randomInt(0, 255)})`;
 `hsl(${randomInt(0, 100)}, 40%, 90%)`;
 console.log(randomColor(0, 255));

//イベントを呼び出す
 document.querySelector('.nav__link').addEventListener('click', function (e) {
//このthisはイベントハンドラーがついているものを意味します。この場合は'.nav__link'です。
 this.style.backgroundColor = randomColor();
 });

//イベントを伝搬させる
 document.querySelector('.nav__links').addEventListener('click', function (e) {
//このthisはイベントハンドラーがついているものを意味します。この場合は'.nav__links'です。
 this.style.backgroundColor = randomColor();
 });

 

プログラムの作り方

ランダムに配色を変えるには、

  • 乱数を作る
  • テンプレートリテラルで配色を設定する

この2ステップで出来上がりです。

後は、イベントハンドラーで呼び出したりするといいでしょう。
上の場合は、クリックイベントを設定しています。

 

乱数の作り方

乱数の作り方は、次の記事を参考にしてみてください。

 

テンプレートリテラルの設定方法

テンプレートリテラルは次の記事を参考にしてみてください。

配色：hslについて

配色に関しては、rgbでもhslでも何でもできます。

全部を乱数にすると統一感はありませんので、統一感を出すのであれば、hslで設定するのがおすすめです。

hslに関しては、次の記事を参考にしてみてください。

 

イベントの伝播を利用する

また、イベントの伝播と合わせるとより連動して変化するおもしろいアニメーションを作成することが可能になります。

イベントの伝播は、次の記事を参考にしてみてください。

JavaScript

Posted by devsakaso