js 小球运动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    #box{
      width:60px;height:60px;position:absolute;left:10px;top:0px;background:#333;border-radius:50%;margin-top:80px;
    }
    #qiangL{
      width:2px;height:150px;position:absolute;left:10px;background:#999;margin-top:20px;
    }
    #qiangR{
      width:2px;height:150px;position:absolute;left:1000px;background:#999;margin-top:20px;
    }
  </style>
</head>
<body>
  <button id="btn1">开始</button>
  <button id="btn">停止</button>
  <div id="box"></div>
  <div id="qiangL"></div>
  <div id="qiangR"></div>
  <script type="text/javascript">
   
        // 找到小球的Id
    var o=document.getElementById('box');
    // 左边墙的Id
    var qiangL=document.getElementById('qiangL');
    // 右边墙的Id
    var qiangR=document.getElementById('qiangR');
    // 每次添加的距离
    var wd=5;
    // 求出小球的左边的距离
    var a=window.getComputedStyle(o,null).left;
    // 对左边墙的距离取整
    var b=parseInt(window.getComputedStyle(qiangL,null).left);
    // 对右边墙的距离取整
    var c=parseInt(window.getComputedStyle(qiangR,null).left);
    // 取得小球距离右边墙的距离取整
    var dq=c-parseInt(window.getComputedStyle(o,null).width);
    // 定义全局变量以后用于清理定时器
    var d;
    // 添加布尔值
    var z=true;
    // 设置开始按钮的点击事件
    document.getElementById("btn1").οnclick=function(){
      // 先添加清理定时器再添加定时器防止多次点击出错
      clearInterval(d);
      d=setInterval(showleft,20);
    }
    // 设置停止按钮的点击事件
    document.getElementById("btn").οnclick=function(){
      clearInterval(d);
    }
    // 定义具体函数
    function showleft(){
      // 小球的左边的距离取整
      a=parseInt(a);
      // 当z为真时小球向右运动,撞右墙时z变假,当z为假时小球向左运动,撞左墙时z变真便可无限循环
      if(z==true){
        if(a<dq){
          a=a+wd;
          o.style.left=a+"px";
        }
        else{
          z=false;
        }
      }

        else{
          if(a==b){
            z=true;
        }
        else{
          a=a-wd;
          o.style.left=a+"px";
        }
      }
    }

  </script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值