はじめに
こんにちは！@70days_jsです。
サイトを10*10に区切って、マウスが動くと背景も変わるようにしました。
ほぼ全部JavaScriptを使っています。
今日は49日目。(2019/12/6)
よろしくお願いします。
サイトURL
https://sin2cos21.github.io/day49.html
やったこと
伝えづらいんですが、映像を見れば一発だと思います。
こんな感じです。↓
htmlはdivを一つ用意するだけです。↓
<body><divid="mouseMove"></div></body>JavaScript全文↓
letmouseMove=document.getElementById("mouseMove");letinnerWidth;letinnerHeigt;innerHeigt=window.innerHeigt;innerWidth=window.innerWidth;height10=innerHeight/10;width10=innerWidth/10;for(vari=0;i<10;i++){for(varj=0;j<10;j++){letdiv=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){letgetClass=document.getElementsByClassName("color");for(vari=0;getClass.length>i;i++){randomColor(getClass[i]);}});functionrandomRGB(){letr=Math.floor(Math.random()*256);letg=Math.floor(Math.random()*256);letb=Math.floor(Math.random()*256);letrgb=[r,g,b];returnrgb;}functionrandomColor(element){letrgb=randomRGB();letr=rgb[0];letg=rgb[1];letb=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とか、技術的な方向を掘っていきたいと思います。
最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。