연말까지 매일 웹 사이트를 꾸준히 만드는 대학생들이 49일째 사이트를 10*10으로 나누고 마우스를 움직이면 배경도 바뀐다~

11355 단어 JavaScriptCSS

입문


안녕하세요@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%;
}
이 세 줄만.

감상


나는 마우스를 움직이는 시스템에 빠졌다.
나는 프로미스를 파야 할 만큼 기술적인 방향이 많지 않다고 생각한다.
끝까지 읽어줘서 고마워요.내일도 투고할 테니 잘 부탁드립니다.
트렌디한 배경 애니메이션 같아요.
웹 글꼴을 사용할 때 bold를 읽을 때 font-weight 다음에 처리합니다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage