<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>温故而知新</title>
<style>
div {
position: absolute;
left: 0px;
top: 0px;
background: #ff0000;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id='demo'></div>
</body>
<script>
const oDiv = document.getElementById("demo");
oDiv.onclick = function () {
startMove(this)
}
function startMove(dom) {
clearInterval(dom.timer);
let iSpeedX = 6, iSpeedY = 8;
let newTop = null, newLeft = null;
let g = 3;
dom.timer = setInterval(function () {
iSpeedY += g;
newTop = dom.offsetTop + iSpeedY;
newLeft = dom.offsetLeft + iSpeedX;
if (newTop >= document.documentElement.clientHeight - dom.clientHeight) {
iSpeedY *= -1;
iSpeedY *= 0.8;
iSpeedX *= 0.8;
newTop = document.documentElement.clientHeight - dom.clientHeight;
}
if (newTop <= 0) {
iSpeedY *= -1;
iSpeedY *= 0.8;
iSpeedX *= 0.8;
newTop = 0;
}
if (newLeft >= document.documentElement.clientWidth - dom.clientWidth) {
iSpeedX *= -1;
iSpeedY *= 0.8;
iSpeedX *= 0.8;
newLeft = document.documentElement.clientWidth - dom.clientWidth;
}
if (newLeft <= 0) {
iSpeedX *= -1;
newLeft = 0;
iSpeedY *= 0.8;
iSpeedX *= 0.8;
}
if (Math.abs(iSpeedX) < 1) {
iSpeedX = 0
}
if (Math.abs(iSpeedY) < 1) {
iSpeedY = 0
}
if (iSpeedX == 0 && iSpeedY == 0 && newTop == document.documentElement.clientHeight - dom.clientHeight) {
console.log("完成")
clearInterval(dom.timer)
} else {
dom.style.top = newTop + "px";
dom.style.left = newLeft + "px";
}
}, 20)
}
</script>
</html>