我已经开始学习 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>最佳答案
变化:
- 将父
div从position: fixed更改为position: relative。 - 将
top和left值从px更改为%。 - 添加
div和main类(添加到此divpadding-bottom: 100px和padding-right: 100px;如果 left 或 top 等于100%之类的值，则适合父 div 中的形状。 - 为父
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>关于javascript - 如何强制子 div 位于父 div 内？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33347605/