JS操作元素运动的简单封装

最新推荐文章于 2022-10-27 13:49:30 发布

寒江独

最新推荐文章于 2022-10-27 13:49:30 发布

阅读量386

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/fandyvon/article/details/88718962

本文介绍了一个简单的JS元素运动实现，并进一步封装成函数。通过设定定时器，控制元素按指定速度移动到目标位置，同时演示了如何取消定时器避免资源浪费。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS操作元素运动的简单封装

JS操作元素运动的简单封装。在之前介绍定时器的时候也介绍了一些JS中运动的知识。就是利用定时器来操作元素运动。我们来系统总结下JS中的运动知识。

1、简单运动实现

先看实现过程，然后分析代码

   <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单运动</title>
<style>
	#div1{width: 100px;height: 100px;background: red;position: absolute;left:0;top:50px;}
</style>
<script type="text/javascript">
window.onload=function(){
	var oDiv=document.getElementById('div1');
	var oBtn=document.getElementById('btn');

	var iTimer=null;//为了取消定时器设定变量

	oBtn.onclick=function(){

		clearInterval(iTimer);//避免运行多个定时器

		iTimer=setInterval(function(){

			if(oDiv.offsetLeft>=500){

				oDiv.style.left=500+"px";

				clearInterval(iTimer);

			}else{
				oDiv.style.left=oDiv.offsetLeft+7+"px"
			}

		},50)
	}
}
</script>
</head>
<body>
	<input type="button" value="运动" id="btn"/>
	<div id="div1"></div>
</body>
</html>

  

1、为了取消定时器先对定时器声明一个变量，为空

2、在定时器开始运行之前，先取消定时器。是为了防止多次点击按钮后，产生多个定时器

3、使用判断，判断元素的运行位置。

4、数字7相当于元素运行的速度。当元素运行的位置不能整除速度的时候，用判断语句

5、为什么用oDiv.style.left=500+”px”;这个语句呢？这是因为offsetLeft是只读的属性，改变div的位置只能使用oDiv.style.left来取值。

好，以上是一个很简单的DIV运动的例子。我们将这个实例进行简单封装。

2、简单运动封装

对上例进行封装，其实也就是建立一个函数，使用参数来替换掉变量的东西。对于上例来说，在元素运动时，可以替换掉div

   <script type="text/javascript">
window.onload=function(){
	var oDiv=document.getElementById('div1');
	var oBtn=document.getElementById('btn');

	var iTimer=null;//为了取消定时器设定变量

	oBtn.onclick=function(){

		starMove(oDiv);
	}

		function starMove(iDiv){

			clearInterval(iTimer)

			iTimer=setInterval(function(){

			if(iDiv.offsetLeft>=500){

				iDiv.style.left=500+"px";

				clearInterval(iTimer);

			}else{
				iDiv.style.left=iDiv.offsetLeft+7+"px"
			}
		},50)
	}

}
</script>

  

在线操作