Question

我已经开始学习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>

Answer 1

的变化：

将父div从position: fixed更改为position: relative。
将top和left值从px更改为%。
添加div main课程（添加到此div padding-bottom: 100px和padding-right: 100px;以适合父div中的形状（如果left或top等于）像100%。
为父div添加了高度（您可以使用媒体查询更改不同设备的高度）。
从#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>

如何强制子div在父div中？

1 个答案: