javascriptを使って色をランダムで出す
javascriptを使って、ボタンをクリックするごとに背景をランダムで出すデモ。
jQuey無しで動きます。改良してグラデ版も作ってみたいです。
See the Pen 180530_色をランダムで出す by nekuta (@nekuta) on CodePen.
js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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+')'; } |
