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>

js 飞舞的小球