javascript - 检测绝对元素何时超出容器
问题描述
我正在尝试创建一个随机函数,它将随机化其父容器内的船舶位置(红色容器)。但是,我不知道如何设置一个条件来检测容器何时超出其父元素。
如何检查元素相对于其父容器的位置?我似乎找不到这样做的语法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Battleship</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 50rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
body {
background-color: rgb(0, 0, 0);
}
h1{
color: white;
margin: 3rem 0 1rem 0;
}
#messageBoard{
color: white;
margin: 0 0 1rem 0;
}
#shipContainer {
width: 20rem;
height: 7.5rem;
background-color: rgba(17, 13, 236, 0);
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: relative;
}
.shipDivs{
width: 10%;
height: 25%;
border: 1px solid rgba(212, 212, 221, 0.116);
}
.battleship{
position: absolute;
left: 50%;
width: 10%;
height: 100%;
border: 1px solid red;
background-color:rgba(18, 26, 4, 0.425);
overflow: hidden;
}
.cruiser {
position: absolute;
left: 20%;
width: 10%;
height: 75%;
border: 1px solid red;
background-color:rgba(18, 26, 4, 0.425);
}
.spyShip{
position: absolute;
left: 40%;
width: 10%;
height: 25%;
border: 1px solid red;
background-color:rgba(18, 26, 4, 0.425);
}
.spyShip2 {
position: absolute;
left: 40%;
top: 50%;
width: 10%;
height: 25%;
border: 1px solid red;
background-color:rgba(18, 26, 4, 0.425);
}
#wrapper {
width: 20rem;
height: 20rem;
margin: 2.5rem 0 0 0;
display: flex;
justify-content: center;
align-items: center;
align-content: flex-start;
flex-wrap: wrap;
background-color: rgba(17, 13, 236, 0);
}
.squares {
border: 1px solid rgba(212, 212, 221, 0.5);
width: 10%;
height: 10%;
}
</style>
</head>
<body>
<h1>BattleShip!</h1>
<p id="messageBoard">Place Your Ships!</p>
</div>
<div id="shipContainer">
<div class="battleship"></div>
<div class="cruiser"></div>
<div class="spyShip"></div>
<div class="spyShip2"></div>
<div class="spyShip3"></div>
</div>
<div id="wrapper"></div>
</body>
<script>
const body = document.querySelector('body');
const wrapper = document.querySelector('#wrapper')
const box = document.getElementsByClassName('.box');
const div = document.querySelector('div');
const shipContainer = document.querySelector('#shipContainer')
let x = 1;
let y = 1;
mathRdm100 = function(){
return Math.floor(Math.random() * 10) * 10;
}
console.log(mathRdm100())
for (i = 0; i < 40; i++){
let div = document.createElement('div');
div.classList = `shipDivs`;
shipContainer.appendChild(div);
}
for (i = 0; i < 100; i++){
let div = document.createElement('div');
div.classList = `squares`;
wrapper.appendChild(div);
x++
y++
}
randomPosition = function(){
let position = mathRdm100();
document.querySelector('.battleship').style.left = `${mathRdm100()}%`;
document.querySelector('.battleship').style.right = `${mathRdm100()}%`;
document.querySelector('.battleship').style.bottom = `${mathRdm100()}%`;
document.querySelector('.battleship').style.top = `${mathRdm100()}%`;
// if (document.querySelector('.battleship') ???? ){
// console.log('true');
// }else {
// console.log('false');
// }
}
randomPosition()
</script>
</body>
</html>
解决方案
推荐阅读
- javascript - 用 javascript 填充输入搜索字段(字段动态显示结果)
- c# - 将 Android Studio (Java) 转换为 C#.NET
- excel - EXCEL:索引匹配最大日期多个条件
- javascript - 当您删除帖子时,是否可能在 Django 上有一个类似 javascript alert() 的警告框?
- python - 如何在适用于 Linux (WSL) 的 Windows 子系统上安装 kivy?
- c++ - 我包含了必要的头文件,但得到“错误:gai_strerrorA 未在此范围内声明”,ubuntu16.04,g++ 5.5
- tensorflow - Keras:如何均衡连接 2 层的尺寸
- javascript - 屏幕没有更新
- python - 使用 Yfinance 获取市值数据
- strapi - Strapi 服务器现在在 cloud9 上启动