Help us understand the problem. What is going on with this article?

年末まで毎日webサイトを作り続ける大学生 〜49日目 サイトを10*10に区切って、マウスを動かすと背景も変わる〜

はじめに

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

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

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

サイトURL

https://sin2cos21.github.io/day49.html

やったこと

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

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とか、技術的な方向を掘っていきたいと思います。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away