如何用javascript自动生成div？

我做了一个基本的javascript代码，这样你就可以用鼠标戳divs了。
不幸的是，我必须手动添加它们，但我想添加这么多的模式。首先，我决定使用网格，但我猜它不会工作，因为div（我称之为正方形从现在开始：d）可以改变它们的位置。
所以我想问，我怎样才能创建一个javascript代码，我可以产生他们，直到他们填补了屏幕。
我还有另一个问题，这是realted这个项目，我怎么能使这些广场只是装饰。我的意思是装饰我不希望他们影响网站在所有，当块走出屏幕的身体开始消耗，有什么办法可以避免？
(Also如果你把片段全屏显示会更好!）

speedX = 0
speedY = 0

square = document.getElementsByClassName("square")

document.onmousemove=function(e){
    speedX = e.movementX;
    speedY = e.movementY;

    posX = e.pageX;
    posY = e.pageY;

}

setInterval(() => {

    movement = Math.sqrt(speedX*speedX + speedY*speedY)
    speed = movement * 10

}, 100);


function AddSquare(){
    const newDiv = document.createElement("div")
    const parent = document.querySelector(".background")
    newDiv.classList.add("square")
    parent.appendChild(newDiv)

}

for (let i = 0; i < square.length; i++) {
    const element = square[i];

    element.style.backgroundColor = element.getAttribute("color")

    element.addEventListener('mouseover',() => {
        const y = speedY
        const x = speedX
    
        const rad = Math.atan2(y, x)
        yAxis = movement * Math.sin(rad)
        xAxis = movement * Math.cos(rad)
    
        element.style.left = `${Math.round(element.getBoundingClientRect().x + xAxis * 3)}px`
        element.style.top = `${Math.round(element.getBoundingClientRect().y + yAxis * 3)}px`

        element.style.transform = `rotate(${rad * (180/Math.PI)}deg)`
    
    
    });
    
}

body{
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: flex;

}

.square{
    background-color: lightcoral;
    width: 75px;
    height: 75px;
    position: absolute;
    transform: rotate(0deg);

    transition: all ease-out 0.5s;
    
}

#Header{
    font-size: italic;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <link rel="stylesheet" href="css.css">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <div class="background">
        <div class="square" style="top: 150px; left: -20px;" color="lightcoral"></div>
        <div class="square" style="top: 150px; left: 80px;" color="bisque"></div>
        <div class="square" style="top: 150px; left: 180px;" color="lightcoral"></div>
        <div class="square" style="top: 150px; left: 280px;" color="aquamarine"></div>
        <div class="square" style="top: 150px; left: 380px;" color="bisque"></div>
        <div class="square" style="top: 150px; left: 480px;" color="lightcoral"></div>
        <div class="square" style="top: 150px; left: 580px;" color="aquamarine"></div>
        <div class="square" style="top: 150px; left: 680px;" color="bisque"></div>
        <div class="square" style="top: 150px; left: 780px;" color="lightcoral"></div>
        <div class="square" style="top: 150px; left: 880px;" color="aquamarine"></div>
        <div class="square" style="top: 150px; left: 980px;" color="bisque"></div>
        <div class="square" style="top: 150px; left: 1080px;" color="lightcoral"></div>
    
        <div class="square" style="top: 250px; left: -30px;" color="cadetblue"></div>
        <div class="square" style="top: 250px; left: 70px;" color="cadetblue"></div>
        <div class="square" style="top: 250px; left: 170px;" color="greenyellow"></div>
        <div class="square" style="top: 250px; left: 270px;" color="yellowgreen"></div>
        <div class="square" style="top: 250px; left: 370px;" color="cadetblue"></div>
        <div class="square" style="top: 250px; left: 470px;" color="greenyellow"></div>
        <div class="square" style="top: 250px; left: 570px;" color="yellowgreen"></div>
        <div class="square" style="top: 250px; left: 670px;" color="cadetblue"></div>
        <div class="square" style="top: 250px; left: 770px;" color="greenyellow"></div>
        <div class="square" style="top: 250px; left: 870px;" color="yellowgreen"></div>
        <div class="square" style="top: 250px; left: 970px;" color="cadetblue"></div>

    
        <div class="square" style="top: 350px; left: -40px;" color="lightcoral"></div>
        <div class="square" style="top: 350px; left: 60px;" color="bisque"></div>
        <div class="square" style="top: 350px; left: 160px;" color="lightcoral"></div>
        <div class="square" style="top: 350px; left: 260px;" color="aquamarine"></div>
        <div class="square" style="top: 350px; left: 360px;" color="bisque"></div>
        <div class="square" style="top: 350px; left: 460px;" color="lightcoral"></div>
        <div class="square" style="top: 350px; left: 560px;" color="aquamarine"></div>
        <div class="square" style="top: 350px; left: 660px;" color="bisque"></div>
        <div class="square" style="top: 350px; left: 760px;" color="lightcoral"></div>
        <div class="square" style="top: 350px; left: 860px;" color="aquamarine"></div>
        <div class="square" style="top: 350px; left: 960px;" color="bisque"></div>
    </div>

    Work in progress...

    <div class="container text-center">
        <div class="row">
            <div class="col"><h1 id="Header">Work in progress...</h1></div>
        </div>
    </div>

    <script type="text/javascript" src = "javascript.js"></script> 

</body>
</html>

你可能有一个函数，给定一个容器，将填充多少方块可以适合只要有可用的宽度和高度的目标。
在这个演示中，我更好地分解了你的代码，并添加了一个名为drawSquares的主函数，当按钮reDRAW被单击时，它会被调用。
我使用一个按钮来触发方框绘制，因为可用空间取决于触发操作时区域的大小。例如，您可以展开代码片段，然后决定重新绘制方框以再次填充整个新区域。
您可以决定在文档就绪或窗口大小调整时调用该操作。

let mouse = {
  speedX: 0,
  speedY: 0,
  posX: 0,
  posY: 0,
  movement: 0,
  speed: 0
}

//on mousemove update the moouse object
document.onmousemove = function(e) {
  mouse.speedX = e.movementX;
  mouse.speedY = e.movementY
  mouse.posX = e.pageX;
  mouse.posY = e.pageY;
}

//refresh the mouse movement and speed every 100ms
setInterval(() => {
  mouse.movement =
    Math.sqrt(Math.pow(mouse.speedX, 2) + Math.pow(mouse.speedY, 2));
  mouse.speed = mouse.movement * 10;
}, 100);

//add a square div in parent element
function addSquare(parent) {
  const newDiv = document.createElement("div");
  newDiv.classList.add("square")
  parent.appendChild(newDiv)
  return newDiv;
}

//add squares in the parent element filling the available size
//gap is the space between squares, size is the edge of the square
//if skipbefore is false it will begin to draw the next square also if it won't fit entirely
function addSquares(parent, gap, size, skipbefore = true) {

  const squares = [];

  let rect = parent.getBoundingClientRect();
  const availableWidth = rect.width;
  const availableHeight = rect.height;

  let top = 100;
  while (top < availableHeight) {
    let left = 0;
    if (skipbefore && top + size > availableHeight)
      break;
    while (left < availableWidth) {
      if (skipbefore && left + size > availableWidth)
        break;
      const square = addSquare(parent);
      square.style.left = `${left}px`;
      square.style.top = `${top}px`;
      squares.push(square);
      left += gap + size;
    }
    top += gap + size;
  }

  return squares;
}

//onmoveover event handler
const squareOnMouseOver = (event) => {
  const element = event.target;

  const y = mouse.speedY;
  const x = mouse.speedX;

  const rad = Math.atan2(y, x);
  yAxis = mouse.movement * Math.sin(rad);
  xAxis = mouse.movement * Math.cos(rad);

  const rect = element.getBoundingClientRect();

  const left = Math.round(rect.x + xAxis * 3);
  const top = Math.round(rect.y + yAxis * 3);

  element.style.left = `${left}px`;
  element.style.top = `${top}px`;
  const o = rad * (180 / Math.PI);
  element.style.transform = `rotate(${o}deg)`;
}

//resets the .target parent and redraw the squares inside it
function drawSquares() {

  const parent = document.querySelector('.target');
  parent.innerHTML = '';
  const squares = addSquares(parent, 25, 75);

  const colors = [
    'lightcoral',
    'bisque',
    'aquamarine',
    'cadetblue',
    'greenyellow',
    'yellowgreen'
  ];

  squares.forEach(square => {
    const iColor = Math.floor(Math.random() * (colors.length - 1));
    const color = colors[iColor];
    square.style.background = color;
    square.addEventListener('mouseover', squareOnMouseOver);
  });
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.square {
  background-color: lightcoral;
  width: 75px;
  height: 75px;
  position: absolute;
  transform: rotate(0deg);
  transition: all ease-out 0.5s;
}

#Header {
  font-size: italic;
}

.background {
  width: 100%;
  height: 100%;
}

.target {
  display: block;
  width: 100%;
  height: 100%;
}

#draw {
  font-size: 20px;
  padding: .2em 1em;
  cursor: pointer;
}

.container .row .col > * {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link el="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<body>
  <div class="background">

    <span>Work in progress...</span>

    <div class="container text-center">
      <div class="row">
        <div class="col">
          <h1 id="Header">Work in progress...</h1>
          <button id="draw" onclick="drawSquares()">reDRAW</button>
        </div>
      </div>
    </div>

    <div class="target"></div>
  </div>
</body>

如何用javascript自动生成div？

1条答案

相关问题

热门标签

最新问答