<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: "Microsoft YaHei", serif;
overflow: hidden;
}
body, dl, dd, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ol, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none
}
#wrap{
position: absolute;
top: 100px;
left: 100px;
width: 50px;
height: 50px;
background-image: radial-gradient(circle,#ffff,deeppink);
border-radius: 50%;
}
</style>
</head>
<body>
<div id="wrap"></div>
<script>
(function () {
let ball = document.getElementById("wrap");
// // 最大的left值应该是可视区的宽-盒子的宽
// let maxLeft = document.documentElement.clientWidth - ball.offsetWidth;
// let maxTop = document.documentElement.clientHeight - ball.offsetHeight;
let maxLeft,maxTop;
window.onresize = (function x(){
maxLeft = document.documentElement.clientWidth - ball.offsetWidth;
maxTop = document.documentElement.clientHeight - ball.offsetHeight;
return x
})();
// 速度
let vLeft = 5;
let vTop = 5;
// setInterval(()=>{
// ball.style.left = ball.offsetLeft + 2 +"px";
// },1000/60);
(function m() {
// 球球左边的距离
let left = ball.offsetLeft + vLeft;
let top = ball.offsetTop + vTop;
// 球球左边的距离大于等于最大宽度
// 判断即将要走的下一步是不是超出或者等于了最大宽度
// 如果是 赋值 并且给一个反向的速度
if (left>=maxLeft){
left = maxLeft;
vLeft = -vLeft;
}
if (left<=0){
left = 0;
vLeft = -vLeft;
}
if (top>=maxTop){
top = maxTop;
vTop = -vTop;
}
if (top<=0){
top = 0;
vTop = -vTop;
}
// 动画执行的步骤
ball.style.left = left + "px";
ball.style.top = top + "px";
requestAnimationFrame(m)
})();
})();
</script>
</body>
</html>
Python3Turtle