js 飞舞的小球
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>飘舞的小球</title>
<style>
div {
width: 100px;
height: 100px;
background: greenyellow;
text-align: center;
line-height: 100px;
font-size: 30px;
border-radius: 50px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div>云与风</div>
</body>
<script>
var piao = document.getElementsByTagName('div')[0]
var xSpeed = 10
var ySpeed = 20
var width = parseInt(getComputedStyle(piao, null)['width'])
var height = parseInt(getComputedStyle(piao, null)['height'])
var timer = setInterval(function(){
// 获取当前位置
var top = parseInt(getComputedStyle(piao, null)['top'])
var left = parseInt(getComputedStyle(piao, null)['left'])
// 修改偏移量
top += ySpeed
left += xSpeed
// 边界判断
// 左右边界
if (left + width >= window.innerWidth || left <= 0) {
xSpeed *= -1
}
// 上下边界
if (top + height >= window.innerHeight || top <= 0) {
ySpeed *= -1
}
// 重新设置
piao.style.top = top + 'px'
piao.style.left = left + 'px'
}, 100)
</script>
</html>