##はじめに
こんにちは！@70days_jsです。
サイトを10*10に区切って、マウスが動くと背景も変わるようにしました。
ほぼ全部JavaScriptを使っています。
今日は49日目。(2019/12/6)
よろしくお願いします。
##サイトURL
https://sin2cos21.github.io/day49.html
##やったこと
伝えづらいんですが、映像を見れば一発だと思います。
こんな感じです。↓
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とか、技術的な方向を掘っていきたいと思います。
最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。