<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width:50px;
height: 50px;
background: #FF0000;
border-radius:50%;
position: absolute;
top:100px
}
</style>
</head>
<body>
<button type="button" id="btn" onclick="startMove()">反弹</button>
<div id="box"></div>
</body>
</html>
<script type="text/javascript">
let btn = document.getElementById("btn");
let box = document.getElementById("box");
let time = null;
function startMove() {
let speedX=5;
let speedY=5;
time = setInterval(function() {
box.style.left = box.offsetLeft + speedX + "px";
box.style.top = box.offsetTop + speedY + "px";
if(box.offsetLeft < 0){
speedX *= -1;
}
let maxX = window.innerWidth - box.offsetWidth;
if(box.offsetLeft > maxX){
speedX *= -1;
}
if(box.offsetTop < 0){
speedY *= -1;
}
let maxY = window.innerHeight - box.offsetHeight;
if(box.offsetTop > maxY){
speedY *= -1;
}
}, 50);
}
</script>
扫一扫
11-10
2161
2161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
