数多の正方形の色が1秒ごとに変わるだけのプログラム
数多の正方形の色が1秒ごとに変わるだけのプログラムです。
色の種類は
16×16×16×16×16×16パターンです。
gitにソースを公開しております。
https://github.com/Chico27/change-color-rectangle
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
const line = 15; const column = 15; const maxRectangle = line*column; var limitCt = 0; window.onload = function() { setInterval("sprinkle()", 1000); let k = 1; for (let i = 1; i <= line; i++) { for (let j = 1; j <= column; j++) { // selectChangeCt = Math.floor(Math.random()*10)+1 const div = document.createElement('div'); div.id='black_rectangele_' + k; div.classList.add('box'); div.classList.add('flex'); // div.classList.add('change_ct_' + selectChangeCt); document.body.appendChild(div); k++; } const div2 = document.createElement('div'); document.body.appendChild(div2); } sprinkle(); } function sprinkle(){ ct = 1; // console.log(ct); // console.log(colorString); let colorString = setColor(); while(ct <= maxRectangle){ let colorString = setColor(); // randomNum = Math.random(); // if (randomNum < 0.5){ let attr = document.getElementById("black_rectangele_" + ct); // if (!attr.classList.contains('box_disappear')) { attr.style.background = colorString; console.log(colorString); // } else { // attr.classList.remove("box_disappear"); // } // } ct++; }; } function setColor(){ let colorString = "#"; for (let i = 0;i < 6; i++){ colornum = Math.floor(Math.random()*16); colorString += colornum.toString(16); } return colorString; } |
私の今までの成果物はこちらです。
成果物一覧
ディスカッション
コメント一覧
まだ、コメントがありません