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

  • コーダーのための計算機