随机放置淡入淡出的div

<div id="container"></div>

#container {
  position: relative;
  width: 500px;
  height: 300px;
}

.div-element {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #f00;
  display: none;
}

// 获取容器元素
var container = document.getElementById("container");

// 定义div元素的数量
var divCount = 10;

// 循环生成div元素
for (var i = 0; i < divCount; i++) {
  // 创建div元素
  var divElement = document.createElement("div");
  divElement.className = "div-element";

  // 设置div元素的位置
  var randomX = Math.floor(Math.random() * 400); // 随机生成0-400之间的x坐标
  var randomY = Math.floor(Math.random() * 200); // 随机生成0-200之间的y坐标
  divElement.style.left = randomX + "px";
  divElement.style.top = randomY + "px";

  // 将div元素添加到容器中
  container.appendChild(divElement);

  // 使用淡入淡出的动画效果显示div元素
  fadeIn(divElement);
}

// 淡入动画效果
function fadeIn(element) {
  var opacity = 0;
  var interval = setInterval(function() {
    if (opacity < 1) {
      opacity += 0.1;
      element.style.opacity = opacity;
    } else {
      clearInterval(interval);
    }
  }, 100);
}

// 淡出动画效果
function fadeOut(element) {
  var opacity = 1;
  var interval = setInterval(function() {
    if (opacity > 0) {
      opacity -= 0.1;
      element.style.opacity = opacity;
    } else {
      clearInterval(interval);
      element.style.display = "none";
    }
  }, 100);
}