<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飘舞的小球</title>
<style type="text/css">
div {
100px;
height: 100px;
line-height: 100px;
font-size: 30px;
border-radius: 50px;
background-color: cyan;
text-align: center;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="piao">飘啊飘</div>
</body>
<script type="text/javascript">
// 设置变化速度
var xSpeed = 10
var ySpeed = 20
// 获取变量
var piao = document.getElementById('piao')
// 获取尺寸
var width = parseInt(getComputedStyle(piao)['width'])
var height = parseInt(getComputedStyle(piao)['height'])
// 设置周期定时任务
var timer = setInterval(function() {
// 获取当前位置
var left = parseInt(getComputedStyle(piao)['left'])
var top = parseInt(getComputedStyle(piao)['top'])
// 设置新的位置
left += xSpeed
top += ySpeed
// 对当前位置进行判定,防止小球跑出边界
if (left <= 0 || left + width >= window.innerWidth) {
xSpeed *= -1
}
if (top <= 0 || top + height >= window.innerHeight) {
ySpeed *= -1
}
// 写入位置
piao.style.left = left + 'px'
piao.style.top = top + 'px'
},100)
</script>
</html>