Javascript运动基础

最新推荐文章于 2022-10-31 18:59:08 发布

yuxiaoxia28

最新推荐文章于 2022-10-31 18:59:08 发布

阅读量498

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/yuxiaoxia28/article/details/45482965

版权

学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

运动基础

①改变属性值，如长宽高，left和top的值，注意offsetLeft和left

②设置物体运动快慢--速度

③打开一个定时器，物体运动不断执行

④运动中的Bug

--运动不会停止（定时器打开，不关闭的话会永远执行）

--速度取某些值会无法停止（设置的值永远不会达到关闭定时器的条件）

--到达位置后再点击还会运动（点击后打开定时器，定时器在设置的时间段内不会停止）

--重复点击速度加快（因为每点击一次都会打开一个定时器，解决办法是在每次打开定时器前关掉定时器）

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#Div{
			background-color: red;
			width: 200px;
			height: 200px;
			position: absolute;
			left:10px;
		}

	</style>
	<script type="text/javascript">
		window.onload = function(){
			var btn=document.getElementById('btn');
			var div=document.getElementById('Div');
			var iSpeed=5;
			var timer=null;
			btn.onclick =function(){

				timer=setInterval(function(){
					clearInterval(timer);//防止重复点击的时候重新打开定时器，使得运动变得越来越快
					if(div.offsetLeft>500)//判断是否到达终点，注意要使用offsetLest,div.style.left=XXpx,div.offsetLeft=XX
					{
						clearInterval(timer);//到达终点关闭定时器
					}
					else{//否则继续运行 ，if和else不能同时运行
						div.style.left=div.offsetLeft+iSpeed+'px';						
					}
				},30);
				
			}
		}

	</script>
</head>
<body>
	<input type="button" value="开始运动" id="btn"/>
	<div id="Div"></div>
</body>
</html>