js碰撞解析

最新推荐文章于 2022-08-04 22:03:45 发布

张张张的博客

最新推荐文章于 2022-08-04 22:03:45 发布

阅读量1.3k

点赞数

分类专栏： web前端 js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_28292937/article/details/52577649

版权

web前端同时被 2 个专栏收录

34 篇文章 2 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var iSpeedX=6;
var iSpeedY=8;


function startMove()
{
	setInterval(function (){
		var oDiv=document.getElementById('div1');
		var l=oDiv.offsetLeft+iSpeedX;
		var t=oDiv.offsetTop+iSpeedY;
		
		if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
		{
			iSpeedY*=-1;
			t=document.documentElement.clientHeight-oDiv.offsetHeight;
		}
		else if(t<=0)
		{
			iSpeedY*=-1;
			t=0;
		}
		
		if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
		{
			iSpeedX*=-1;
			l=document.documentElement.clientWidth-oDiv.offsetWidth;
		}
		else if(l<=0)
		{
			iSpeedX*=-1;
			l=0;
		}
		
		oDiv.style.left=l+'px';
		oDiv.style.top=t+'px';
	}, 30);
}
</script>
</head>


<body>
<input type="button" value="开始运动" οnclick="startMove()" />
<div id="div1">
</div>
</body>

张张张的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js碰撞解析

#div1 {width:100px; height:100px; background:red; position:absolute;}无标题文档var iSpeedX=6;var iSpeedY=8;function startMove(){ setInterval(function (){ var oDiv=document.getElementById('div1
复制链接

扫一扫