小球移动，点击开始按钮，小球开始移动，碰到墙时，停下来。

最新推荐文章于 2019-08-02 09:45:00 发布

天空守护云

最新推荐文章于 2019-08-02 09:45:00 发布

阅读量729

点赞数

本文链接：https://blog.csdn.net/weixin_44606660/article/details/86649380

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box{width: 100px;height: 100px;border-radius: 50%;background: skyblue;position: absolute;left: 0;top: 100px;}
		#wall{width: 2px;height:500px;position: absolute;left: 500px;background: #000;}
	</style>
</head>
<body>
	<button id="btn">开始</button>
	<div id="box"></div>
	<div id="wall"></div>
	<script type="text/javascript">
		//点击开始按钮，小球开始移动，碰到墙时，停下来
         var o=document.getElementById("box");
         var wl=document.getElementById("wall");
         var btn=document.getElementById("btn");
         var speed=5;
         btn.onclick=function(){
         	setInterval(show,20);
         };
         function show(){
            var l=window.getComputedStyle(o,null).left;
            var wall=window.getComputedStyle(wl,null).left;
            var ow=window.getComputedStyle(o,null).width;
            l=parseInt(l);
            ow=parseInt(ow);
            wall=parseInt(wall);
            if(l+ow<wall){
            	 o.style.left=l+speed+'px';
            	}
          }
	</script>
</body>
</html>

天空守护云

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
小球移动，点击开始按钮，小球开始移动，碰到墙时，停下来。

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; #box{width:
复制链接

扫一扫