页面加载时生成固定数量不消失的随机div技术求助

嘿，我明白你的需求啦！你想要页面加载时生成一批固定数量的随机div填满窗口，而且这些div要一直留在页面上对吧？之前的代码因为每次生成后都执行了.fadeOut()和.remove()，所以div刚出来就消失了，咱们把这部分逻辑改一改就行～

核心修改思路 #

原代码的问题在于循环逻辑是生成单个div → 淡出移除 → 重复循环，咱们需要把这个逻辑改成循环N次 → 每次生成一个随机div → 添加到页面保留，直接去掉淡出和移除的步骤就好。

完整代码示例（jQuery版本） #

如果你之前用的是jQuery，下面是修改后的代码，你可以根据自己的需求调整数量、颜色范围、尺寸范围：

$(document).ready(function() {
  // 自定义要生成的div数量，可按需修改
  const targetDivCount = 25;
  // 选择要放置div的容器，这里用body，也可以换成指定的容器ID比如#container
  const container = $("body");

  for (let i = 0; i < targetDivCount; i++) {
    // 生成随机样式：颜色、宽高、位置
    const randomColor = `rgb(${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)})`;
    // 自定义宽度范围（这里是50-250px）
    const randomWidth = `${Math.floor(Math.random()*200) + 50}px`;
    const randomHeight = `${Math.floor(Math.random()*200) + 50}px`;
    // 计算不超出窗口的随机位置
    const maxX = $(window).width() - parseInt(randomWidth);
    const maxY = $(window).height() - parseInt(randomHeight);
    const randomX = `${Math.floor(Math.random()*maxX)}px`;
    const randomY = `${Math.floor(Math.random()*maxY)}px`;

    // 创建div并添加到容器
    const newDiv = $("<div>")
      .css({
        position: "absolute",
        backgroundColor: randomColor,
        width: randomWidth,
        height: randomHeight,
        top: randomY,
        left: randomX,
        borderRadius: "6px" // 可选：给div加个圆角，更美观
      });

    container.append(newDiv);
  }
});

原生JavaScript版本（如果不用jQuery） #

要是你用的是原生JS，这个版本也能满足需求：

document.addEventListener("DOMContentLoaded", function() {
  const targetDivCount = 25;
  const container = document.body;

  for (let i = 0; i < targetDivCount; i++) {
    const randomColor = `rgb(${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)})`;
    const randomWidth = `${Math.floor(Math.random()*200) + 50}px`;
    const randomHeight = `${Math.floor(Math.random()*200) + 50}px`;
    const maxX = window.innerWidth - parseInt(randomWidth);
    const maxY = window.innerHeight - parseInt(randomHeight);
    const randomX = `${Math.floor(Math.random()*maxX)}px`;
    const randomY = `${Math.floor(Math.random()*maxY)}px`;

    const newDiv = document.createElement("div");
    newDiv.style.position = "absolute";
    newDiv.style.backgroundColor = randomColor;
    newDiv.style.width = randomWidth;
    newDiv.style.height = randomHeight;
    newDiv.style.top = randomY;
    newDiv.style.left = randomX;
    newDiv.style.borderRadius = "6px";

    container.appendChild(newDiv);
  }
});

关键修改点说明 #

1. 移除消失逻辑：彻底删掉原代码中的.fadeOut()和.remove()方法，这是让div消失的核心原因
2. 固定数量循环：用for循环生成你需要的固定数量div，而不是生成一个删除一个的无限循环
3. 窗口内定位：计算随机位置时减去div自身的宽高，保证div不会超出可视窗口范围

内容的提问来源于stack exchange，提问作者Grabbels