我做了一个div，或者更好的说法是当我按下按键时一个会移动的圆圈。这个“球”有一个父div，称为容器。它不应通过容器的边界线！
<html>
<head>
<style>
#container{
border: 2px solid orange;
}
#ball{
border-radius: 50%;
width: 50px;
height: 50px;
background: green;
}
</style>
</head>
<body>
<div id="container">
<div id="ball"></div>
</div>
<script type= "text/javascript" src="something.js"></script>
</body>
</html>
const container = document.querySelector('#container');
const ball = document.querySelector('#ball');
let mover = 5;
window.addEventListener('load', () => {
ball.style.position = 'relative';
ball.style.left = 0;
ball.style.top = 0;
});
window.addEventListener('keydown', (e) => {
switch(e.key) {
case 'ArrowUp' :
ball.style.top = parseInt(ball.style.top) - mover + '%';
if(ball.style.left == '100%') {
alert('dont move');
}
break;
case 'ArrowDown' :
ball.style.top = parseInt(ball.style.top) + mover + '%';
break;
case 'ArrowRight' :
ball.style.left = parseInt(ball.style.left) + mover + '%';
break;
case 'ArrowLeft' :
ball.style.left = parseInt(ball.style.left) - mover + '%';
break;
}
});
我尝试使用if语句，因此，如果balls left属性大于100％，则应发出警告或更好的警告，使其无法进一步移动。但是我不知道如何用Javascript解决这个问题（我尝试不使用jQuery来解决）。有什么我忽略的东西吗？
[如果只希望球不越过div线，请在达到阈值后在案例中添加if-else语句。在else部分中，我刚刚添加了警报以显示您无法再进行任何移动。根据您设置的移动器的数量，超过95％的内容将不会向右移动，小于0％的内容将不会向左移动。这是我刚刚迅速提出来的，但希望这可以帮助您走上正确的道路。
<html>
<head>
<style>
#container{
border: 2px solid orange;
}
#ball{
border-radius: 50%;
width: 50px;
height: 50px;
background: green;
}
</style>
</head>
<body>
<div id="container">
<div id="ball"></div>
</div>
<script type= "text/javascript" src="something.js"></script>
</body>
</html>
<script>
const container = document.querySelector('#container');
const ball = document.querySelector('#ball');
let mover = 5;
window.addEventListener('load', () => {
ball.style.position = 'relative';
ball.style.left = 0;
ball.style.top = 0;
});
window.addEventListener('keydown', (e) => {
switch(e.key) {
case 'ArrowUp' :
ball.style.top = parseInt(ball.style.top) - mover + '%';
break;
case 'ArrowDown' :
ball.style.top = parseInt(ball.style.top) + mover + '%';
break;
case 'ArrowRight' :
if((parseInt(ball.style.left) + mover) <= 90){
ball.style.left = parseInt(ball.style.left) + mover + '%';
}
else{
alert("Warning: Threshold Reached")
}
break;
case 'ArrowLeft' :
if((parseInt(ball.style.left) - mover) >= 0){
ball.style.left = parseInt(ball.style.left) - mover + '%';
}
else{
alert("Warning: Threshold Reached")
}
break;
}
});
</script>