限制一个DIV出现在另一个特定大小的DIV中

Limit a DIV to appear within another DIV of specific size

本文关键字：DIV 另一个 一个      更新时间：2023-09-26

我目前正在做一个小项目，该项目随机显示宽度和高度为100px的div（#box）。我希望这个div只出现在另一个div（#boxBorder）中，这样它就可以限制在页面上的特定区域。

以下是我的HTML:的内容

<h1>Test your reactions!</h1>
<p id="directions">Click the shape as fast as you can!</p>
<p id="scoreC">Click score: <span id="cScore">0</span>s</p>
<p id="scoreT">Total score: <span id="tScore">0</span>s</p>
<div id="boxBorder"></div>
<div id="box"></div>

这是CSS：

#boxBorder {
    height: 500px;
    width: 500px;
    margin: 20px auto;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px black solid;
    position: absolute;
    z-index: 0;
}
#box {
    margin: 0 auto;
    height: 100px;
    width: 100px;
    background-color: red;
    display: none;
    border-radius: 50px;
    position: relative;
    z-index: 1;
}
h1 {
    margin: 15px 0 0 0;
}
#directions {
    margin: 0;
    padding: 5px;
    font-size: 0.8em;
}
#scoreT, #scoreC {
    font-weight: bold;
    margin: 10px 50px 0 0;
}
#tScore, #cScore {
    font-weight: normal;   
}
h1, #directions, #scoreT, #scoreC {
    width: 100%;
    text-align: center;
}

最后，用于随机位置的javascript函数：

//Get random position
function getRandomPos() {
    var pos = Math.floor((Math.random() * 500) + 1);
    console.log("POS: " + pos + "px");
    return pos + "px";
}

我在超时方法内调用：

setTimeout(function() {
        createdTime = Date.now();
        console.log("make box: " + createdTime);
        document.getElementById("box").style.top=getRandomPos();
        document.getElementById("box").style.left=getRandomPos();
        document.getElementById("box").style.backgroundColor=getRandomColor();
        document.getElementById("box").style.borderRadius=getRandomShape();
        document.getElementById("box").style.display="block";
    }, rTime);

我在定位方面不是很熟练，而且我似乎无法将这两个div对齐，以便#box-div能够识别#boxBorderdiv的大小并保持在这些限制范围内。任何帮助都将不胜感激！

这里有几个错误：

如果要使用相对定位，则需要在borderBoxdiv中嵌套boxdiv。

<div id="boxBorder">
  <div id="box"></div>
</div>

randomPos函数需要考虑盒子的大小，因此只需乘以400，而不是500。

function getRandomPos() {
  var pos = Math.floor((Math.random() * 400));
  return pos + "px";
}

将样式设置为inline-block，而不是box的block。

使用setInterval而不是setTimeout使其重复。

var rTime = 1000;
function getRandomPos() {
  var pos = Math.floor((Math.random() * 400));
  console.log("POS: " + pos + "px");
  return pos + "px";
}
function getRandomColor() {
  return ['#bf616a', '#d08770', '#ebcb8b', '#a3be8c', '#96b5b4', '#8fa1b3', '#b48ead'][(Math.floor(Math.random() * 7))];
}
function randomizeBox() {
  createdTime = Date.now();
  console.log("make box: " + createdTime);
  document.getElementById("box").style.top = getRandomPos();
  document.getElementById("box").style.left = getRandomPos();
  document.getElementById("box").style.backgroundColor = getRandomColor();
}
setInterval(randomizeBox, rTime);
#boxBorder {
  height: 500px;
  width: 500px;
  margin: 20px auto;
  left: 0;
  right: 0;
  background-color: white;
  border: 1px black solid;
  position: absolute;
  z-index: 0;
}
#box {
  margin: 0 auto;
  height: 100px;
  width: 100px;
  border-radius: 50px;
  position: relative;
  z-index: 1;
  display: inline-block;
}
h1 {
  margin: 15px 0 0 0;
}
#directions {
  margin: 0;
  padding: 5px;
  font-size: 0.8em;
}
#scoreT,
#scoreC {
  font-weight: bold;
  margin: 10px 50px 0 0;
}
#tScore,
#cScore {
  font-weight: normal;
}
h1,
#directions,
#scoreT,
#scoreC {
  width: 100%;
  text-align: center;
}
<h1>Test your reactions!</h1>
<p id="directions">Click the shape as fast as you can!</p>
<p id="scoreC">Click score: <span id="cScore">0</span>s</p>
<p id="scoreT">Total score: <span id="tScore">0</span>s</p>
<div id="boxBorder">
  <div id="box"></div>
</div>

相关文章：