当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 飘舞的小球

飘舞的小球

2019年04月17日  | 移动技术网IT编程  | 我要评论

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>飘舞的小球</title>
  <style type="text/css">
   div {
    width: 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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网