logo标签列表

如何强制子元素div保持在父元素div中？

javascripthtmlcss
3

我开始学习JavaScript，正在尝试改进这个脚本。我希望将生成的框保持在固定的父级div内，在不同的屏幕尺寸下，它将强制点击的div出现在可见区域内。

function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
var clickedTime;
var createdTime;
var reactionTime;

function makeBox() {
  var rndm = Math.random();
  rndm = rndm * 1000;
  setTimeout(function() {
    if (Math.random() > 0.5) {
      document.getElementById("box").style.borderRadius = "50%";
    } else {
      document.getElementById("box").style.borderRadius = "0px";
    }
    var top = Math.random();
    var left = Math.random();
    top = top * 340;
    left = left * 1000;
    document.getElementById("box").style.position = "absolute";
    document.getElementById("box").style.top = top + "px";
    document.getElementById("box").style.left = left + "px";
    document.getElementById("box").style.backgroundColor = getRandomColor();
    document.getElementById("box").style.display = "block";
    createdTime = Date.now();
  }, rndm);
}
document.getElementById("box").onclick = function() {
  this.style.display = "none";
  clickedTime = Date.now();
  reactionTime = ((clickedTime - createdTime) / 1000);
  document.getElementById("time").innerHTML = reactionTime;
  makeBox();
}
makeBox();
body {
  font-family: verdana, "comic sans ms", arial;
}
#box {
  width: 100px;
  height: 100px;
  background-color: aqua;
  position: relative;
}
.p {
  font-weight: bold;
}
/* setting the parent div size according to the device screen size */

#parent {
  position: fixed !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 150px;
  /*            background-color: aquamarine;*/
  border: 1px solid aqua;
  margin: 0px 3px 5px 5px;
}
#date {
  font-weight: normal !important;
  border: 1px solid blue;
  width: 590px;
  margin-bottom: 20px;
}
<html>

<head>
  <title>Reaction Game</title>
</head>

<body>
  <h1>Test Your Reaction</h1>
  <h3 id="date"> 
        </h3>
  <p class="p">Your Reaction Time <span id="user"></span> is : <span id="time"> 0 </span> Seconds.</p>
  <div id="parent">
    <div id="box"></div>
  </div>
</body>

</html>

1
我看到你覆盖了一些 CSS 属性，例如 #parent 的 position 和 #parent 的 top。但是你应该注意只有 top: 150px; 和 position: fixed !important; 才会生效。 - Daniel Alder
1个回答
2

更改：

  1. 将父级 div 的位置从 position: fixed 更改为 position: relative。
  2. 将 top 和 left 值从 px 更改为 %。
  3. 添加了一个带有 main 类的 div（将此 div 添加到 padding-bottom: 100px 和 padding-right: 100px;，以适应您的父级 div 中的形状，如果 left 或 top 等于 100％）。
  4. 向父级 div 添加高度（可以使用媒体查询为不同设备更改高度）。
  5. 从 #parent 中删除边框，添加到 .main 

function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

var clickedTime;
var createdTime;
var reactionTime;

function makeBox() {
  var rndm = Math.random();
  rndm = rndm * 1000;
  setTimeout(function() {
    if (Math.random() > 0.5) {
      document.getElementById("box").style.borderRadius = "50%";
    } else {
      document.getElementById("box").style.borderRadius = "0px";
    }
    var top = Math.random();
    var left = Math.random();
    top = top * 100;
    left = left * 100;
    document.getElementById("box").style.position = "absolute";
    document.getElementById("box").style.top = top + "%";
    document.getElementById("box").style.left = left + "%";
    document.getElementById("box").style.backgroundColor = getRandomColor();
    document.getElementById("box").style.display = "block";
    createdTime = Date.now();
  }, rndm);
}
document.getElementById("box").onclick = function() {
  this.style.display = "none";
  clickedTime = Date.now();
  reactionTime = ((clickedTime - createdTime) / 1000);
  document.getElementById("time").innerHTML = reactionTime;
  makeBox();
}
makeBox();
body {
  font-family: verdana, "comic sans ms", arial;
}
#box {
  width: 100px;
  height: 100px;
  background-color: aqua;
  position: relative;
}
.p {
  font-weight: bold;
}
#parent {
  position: relative;
  height: 300px;
  margin: 0px 3px 5px 5px;
}
#date {
  font-weight: normal !important;
  border: 1px solid blue;
  width: 590px;
  margin-bottom: 20px;
}
.main {
  padding-bottom: 100px;
  padding-right: 100px;
  border: 1px solid aqua;
}
<h1>Test Your Reaction</h1>
<h3 id="date"></h3>
<p class="p">Your Reaction Time <span id="user"></span> is : <span id="time">0 </span> Seconds.</p>
<div class="main">
  <div id="parent">
    <div id="box"></div>
  </div>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接