如何用jQuery让含图片的<div>按设定/随机间隔在页面重复出现？

嘿，我来帮你搞定这两个问题！咱们先从基础的定时重复出现需求说起，再针对你的游戏场景做优化～

一、基础需求：按固定间隔持续出现带图片的

#

这里有两种常用思路，你可以根据实际场景选择：

思路1：动态创建新元素（适合需要多个元素同时存在的场景） #

每次触发时生成新的<div>，插入图片、设置样式后添加到页面，还可以加上自动消失的逻辑：

<!-- 先准备一个容器用来存放生成的元素 -->
<div id="container"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 设定固定间隔（比如2秒）
const intervalTime = 2000;

// 定时执行的生成函数
function spawnImageDiv() {
  // 创建新div，嵌入图片并设置基础样式
  const newDiv = $('<div class="image-box"></div>')
    .append('<img src="你的图片路径.jpg" alt="图片">')
    // 随机位置（可选，避免每次都在同一处）
    .css({
      position: 'absolute',
      top: Math.random() * ($(window).height() - 100) + 'px',
      left: Math.random() * ($(window).width() - 100) + 'px',
      width: '100px',
      height: '100px'
    });
  
  // 将新元素添加到容器
  $('#container').append(newDiv);
  
  // 可选：3秒后自动移除该元素
  setTimeout(() => {
    newDiv.remove();
  }, 3000);
}

// 启动定时任务
const spawnInterval = setInterval(spawnImageDiv, intervalTime);

// 如果需要手动停止，比如点击按钮后：
// clearInterval(spawnInterval);
</script>

思路2：复用已有隐藏元素（适合只需要一个元素反复出现的场景） #

提前写好一个隐藏的<div>，每次触发时显示它、调整位置，过段时间再隐藏：

<!-- 提前准备好隐藏的鸭子元素 -->
<div id="duck-box" style="display: none; position: absolute;">
  <img src="鸭子图片路径.jpg" alt="鸭子">
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const intervalTime = 2000;

function showDuck() {
  // 调整随机位置并显示元素
  $('#duck-box')
    .css({
      top: Math.random() * ($(window).height() - 100) + 'px',
      left: Math.random() * ($(window).width() - 100) + 'px'
    })
    .show();
  
  // 2秒后隐藏元素
  setTimeout(() => {
    $('#duck-box').hide();
  }, 2000);
}

// 启动定时任务
const spawnInterval = setInterval(showDuck, intervalTime);
</script>

二、游戏场景优化：随机间隔+游戏时长控制 #

你的游戏需求需要随机间隔，这时候setInterval（固定间隔）就不够灵活了，更适合用递归的setTimeout实现，同时加上游戏时长限制：

核心思路 #

• 用递归的setTimeout代替setInterval，每次计算一个随机的间隔时间
• 按需选择复用元素或创建新元素（如果需要多个鸭子同时存在，优先选创建新元素）
• 设置游戏总时长，到点后停止递归

代码示例（复用鸭子元素+随机间隔+时长控制） #

<div id="duck-box" style="display: none; position: absolute; width: 80px; height: 80px;">
  <img src="鸭子图片.jpg" alt="鸭子" style="width: 100%;">
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 游戏总时长（比如30秒）
const gameDuration = 30000;
// 随机间隔范围：1秒到3秒之间
const minInterval = 1000;
const maxInterval = 3000;

// 记录游戏开始时间
const gameStartTime = Date.now();

function spawnDuck() {
  // 检查游戏是否结束
  if (Date.now() - gameStartTime > gameDuration) {
    console.log('游戏结束！');
    return; // 停止递归
  }
  
  // 显示鸭子并设置随机位置
  $('#duck-box')
    .css({
      top: Math.random() * ($(window).height() - 80) + 'px',
      left: Math.random() * ($(window).width() - 80) + 'px'
    })
    .show();
  
  // 1.5秒后隐藏鸭子，然后递归触发下一次生成
  setTimeout(() => {
    $('#duck-box').hide();
    // 计算下一个随机间隔
    const nextInterval = Math.random() * (maxInterval - minInterval) + minInterval;
    setTimeout(spawnDuck, nextInterval);
  }, 1500);
}

// 启动游戏
spawnDuck();
</script>

关键注意点 #

• 如果需要多个鸭子同时出现，就改用动态创建元素的方式（参考第一个思路的代码），记得在合适时机移除元素（比如被点击后或超时后）
• 计算随机位置时，要减去元素自身的宽高，避免鸭子超出屏幕范围
• 若需手动停止游戏，可以加一个全局变量（比如let isGameRunning = true），在spawnDuck开头判断状态，外部通过按钮等操作修改状态来停止

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