javascriptを使って色をランダムで出す

javascriptを使って、ボタンをクリックするごとに背景をランダムで出すデモ。
jQuey無しで動きます。改良してグラデ版も作ってみたいです。

See the Pen 180530_色をランダムで出す by nekuta (@nekuta) on CodePen.

js

  var box = document.getElementById('box');
  var txt = document.getElementById('txt');
  var btn = document.getElementById('btn');

  var min = 0;
  var max = 255;

  //イベント処理
  btn.addEventListener('click', colorPicker, false);

  function colorPicker() {
    var i = 0;
    //空の配列を作成
    var colorArray = [];

    //whileで3回回す
    //空の配列colorArrayに値を入れていく
    while (i < 3) {
      // 0~255までの乱数を出す
      var num = Math.floor(Math.random() * (max + 1 - min)) + min;
      colorArray.push(num);
      i++;
    }
    txt.textContent = 'rgb(' + colorArray + ')'
    box.style.background = 'rgb(' + colorArray + ')';
  }

参考サイト

Math.random() – JavaScript | MDN