はじめに

こんにちは！@70days_jsです。

サイトを10*10に区切って、マウスが動くと背景も変わるようにしました。
ほぼ全部JavaScriptを使っています。

今日は49日目。(2019/12/6)
よろしくお願いします。

サイトURL

やったこと

伝えづらいんですが、映像を見れば一発だと思います。
こんな感じです。↓

htmlはdivを一つ用意するだけです。↓

  <body>
    <div id="mouseMove"></div>
  </body>

JavaScript全文↓

let mouseMove = document.getElementById("mouseMove");
let innerWidth;
let innerHeigt;

innerHeigt = window.innerHeigt;
innerWidth = window.innerWidth;
height10 = innerHeight / 10;
width10 = innerWidth / 10;

for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    let div = document.createElement("div");
    div.setAttribute("class", "color");
    div.style.top = height10 * i + "px";
    div.style.left = width10 * j + "px";
    randomColor(div);
    mouseMove.appendChild(div);
  }
}

mouseMove.addEventListener("mousemove", function(e) {
  let getClass = document.getElementsByClassName("color");
  for (var i = 0; getClass.length > i; i++) {
    randomColor(getClass[i]);
  }
});

function randomRGB() {
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  let rgb = [r, g, b];
  return rgb;
}

function randomColor(element) {
  let rgb = randomRGB();
  let r = rgb[0];
  let g = rgb[1];
  let b = rgb[2];
  element.style.backgroundColor = "rgba(" + r + ", " + g + "," + b + ", .3)";
}

サイズを取って/10をして10分割を実現しています。↓

innerHeigt = window.innerHeigt;
innerWidth = window.innerWidth;

10*10のdivを作っています。↓

for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
let div = document.createElement("div");
div.setAttribute("class", "color");
div.style.top = height10 * i + "px";
div.style.left = width10 * j + "px";
randomColor(div);
mouseMove.appendChild(div);
}
}

マウスが動くごとに　背景を変えています。↓

mouseMove.addEventListener("mousemove", function(e) {
let getClass = document.getElementsByClassName("color");
for (var i = 0; getClass.length > i; i++) {
randomColor(getClass[i]);
}
});

最後にcss全文↓

body {
  margin: 0;
  overflow: hidden;
}

# mouseMove {
  height: 100vh;
  width: 100vw;
}

.color {
  background-color: red;
  position: absolute;
  width: 10%;
  height: 10%;
}

ポイントは

position: absolute;
width: 10%;
height: 10%;
}

この3行だけです。

感想

マウスを動かす系にはまってしまいました。
そろそろpromiseとか、技術的な方向を掘っていきたいと思います。

最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。