1秒ごとに数多の正方形の色が特定の色に変わる可能性のあるだけのプログラム
1秒ごとに数多の正方形の色が特定の色に変わる可能性のあるだけのプログラムです。
色の種類は
赤、オレンジ、黄色、緑、水色、青、紫の合計7パターンです。
虹の色と同じですね。
以前色の種類が
16×16×16×16×16×16パターンのものを公開しましたが、色の種類が多すぎて野暮ったくなるので色の種類を7種類に減らしました。
数多の正方形の色が1秒ごとに変わるだけのプログラム
色の種類が3種類のものも試しました。
色の種類は
赤、黄色、青です。
こちらはどこか子供っぽい色合いになりました。
gitにソースを公開しております。
こちらのソースは7色のものになります。
https://github.com/Chico27/change-color-rectangle2
jsはこんな感じに作られております。
ところどころコメントがありますが気にしないでください。
function setColorのcolorList1をcolorList2に変えれば3色になります。
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 58 59 60 |
const line = 10; const column = 10; 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 = "#"; let colorList1 = ['red', 'orange', 'yellow', 'green', 'aqua', 'blue', 'purple']; let colorList2 = ['red', 'yellow', 'blue']; // for (let i = 0;i < 6; i++){ colornum = Math.floor(Math.random()*colorList1.length); let colorString = colorList1[colornum]; // console.log(colorString); // } return colorString; } |
私の今までの成果物はこちらです。
成果物一覧
ディスカッション
コメント一覧
まだ、コメントがありません