求助：实现点击按钮在容器内随机显示文字并适配移动端

嘿，我来帮你搞定这个问题！你的核心需求是让随机生成的文字乖乖待在指定容器里，还要适配移动端避免滚动条对吧？咱们一步步来改：

1. 先搞定容器的基础设置 #

首先你需要一个相对定位的容器，因为绝对定位的子元素会以最近的相对定位父元素为基准来定位（原来的代码是相对于body，所以文字乱跑）。同时给容器设置固定宽高或者自适应尺寸，再加overflow: hidden防止文字溢出后出现滚动条。

如果要用Bootstrap栅格，你可以这样写容器：

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4" id="word-container">
      <!-- 文字会生成在这里 -->
    </div>
  </div>
</div>

如果是自定义容器，直接写个div就行，CSS里设置样式：

#word-container {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid #ccc; /* 方便你看到容器范围，可去掉 */
  overflow: hidden;
}

/* 移动端适配：小屏幕下让容器占满视口 */
@media (max-width: 768px) {
  #word-container {
    width: 100vw;
    height: 80vh; /* 留一部分空间放按钮 */
  }
}

2. 修改JavaScript逻辑，让文字在容器内随机定位 #

原来的代码用了window.innerWidth和window.innerHeight，现在要换成容器的宽高，还要注意文字元素本身的尺寸，不然文字可能会一半在容器外。修改后的JS如下：

var words = [ 'Hello', 'No', 'Hi', 'Banana', 'Apple' ];
var visible = 0;
// 获取容器元素
var wordContainer = document.getElementById('word-container');

document.querySelector("form").addEventListener("submit", function(e) {
  e.preventDefault();
  
  // 获取容器的可用宽高
  var containerWidth = wordContainer.clientWidth;
  var containerHeight = wordContainer.clientHeight;
  
  var elem = document.createElement("div");
  elem.textContent = words[visible];
  // 设置文字为绝对定位，相对于容器
  elem.style.position = "absolute";
  
  // 先把元素添加到容器，才能获取它的尺寸
  wordContainer.appendChild(elem);
  
  // 计算最大可偏移的位置：容器宽高 - 文字元素的宽高
  var maxLeft = containerWidth - elem.offsetWidth;
  var maxTop = containerHeight - elem.offsetHeight;
  
  // 生成随机位置，确保文字完全在容器内
  elem.style.left = Math.round(Math.random() * Math.max(0, maxLeft)) + "px";
  elem.style.top = Math.round(Math.random() * Math.max(0, maxTop)) + "px";
  
  visible++;
  // 如果文字数组遍历完了，可以重置索引循环显示
  if (visible >= words.length) {
    visible = 0;
  }
});

关键细节解释 #

• 为什么要先添加元素再计算尺寸？ 因为元素没加到DOM里之前，offsetWidth和offsetHeight是拿不到的，必须先挂载到容器里才能获取真实的尺寸。
• Math.max(0, maxLeft) 是防止容器比文字还小的极端情况（比如移动端横屏时），避免生成负数的位置。
• Bootstrap栅格的作用：如果你用了Bootstrap的col类，容器会自动在不同屏幕尺寸下调整宽度，配合媒体查询就能完美适配移动端。

完整的代码示例 #

把所有部分整合起来就是这样：

<!DOCTYPE html>
<html>
<head>
  <!-- 如果你用Bootstrap，记得引入样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <style>
    #word-container {
      width: 300px;
      height: 300px;
      position: relative;
      border: 1px solid #ccc;
      overflow: hidden;
      margin: 20px auto;
    }
    
    @media (max-width: 768px) {
      #word-container {
        width: 100vw;
        height: 80vh;
        border: none;
      }
    }
    
    form {
      text-align: center;
    }
  </style>
</head>
<body>
  <form>
    <input type="submit" value="生成随机文字">
  </form>
  
  <!-- 自定义容器 -->
  <div id="word-container"></div>

  <script>
    var words = [ 'Hello', 'No', 'Hi', 'Banana', 'Apple' ];
    var visible = 0;
    var wordContainer = document.getElementById('word-container');

    document.querySelector("form").addEventListener("submit", function(e) {
      e.preventDefault();
      
      var containerWidth = wordContainer.clientWidth;
      var containerHeight = wordContainer.clientHeight;
      
      var elem = document.createElement("div");
      elem.textContent = words[visible];
      elem.style.position = "absolute";
      elem.style.fontSize = "24px"; /* 可以调整文字大小 */
      
      wordContainer.appendChild(elem);
      
      var maxLeft = containerWidth - elem.offsetWidth;
      var maxTop = containerHeight - elem.offsetHeight;
      
      elem.style.left = Math.round(Math.random() * Math.max(0, maxLeft)) + "px";
      elem.style.top = Math.round(Math.random() * Math.max(0, maxTop)) + "px";
      
      visible++;
      if (visible >= words.length) visible = 0;
    });
  </script>
</body>
</html>

这样改完之后，所有生成的文字都会乖乖待在容器里，移动端缩小窗口也不会出现滚动条，完美符合你的需求～

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