JavaScript运动框架

最新推荐文章于 2020-09-21 18:15:24 发布

DB-Ruan

最新推荐文章于 2020-09-21 18:15:24 发布

阅读量387

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/feizhoujeep/article/details/38758917

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

框架代码：

<DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>运动框架</title>
		<style>
			#div1{width:200px; height:200px; background:red; position:absolute; left:0; top:50px;}
			#target1{width:1px; height:300px; background:black; position:absolute; top:0; left:300px;}
		</style>
		<script>
			var timer=null;
			function startMove(){
				//alert("ok");
				clearInterval(timer);//保证只有一个定时器在工作，不会说每次点击都开一个定时器导致定时器累计的问题。
				var speed=8;
				var oDiv=document.getElementById("div1");
				timer=setInterval(function(){
					if(oDiv.offsetLeft>=300){
						clearInterval(timer);
					}
					else{//保证不会运动结束后点击还要运动，使目标和运动分开
						oDiv.style.left=oDiv.offsetLeft+speed+"px";
					}
				},30);
			}
		</script>
	</head>
	<body>
		<div id="target1"></div>
		<div id="div1"></div>
		<input type="button" onClick="startMove()" value="click"/>
	</body>
</html>

框架思路：

定义运动函数。首先消除定时器，以免反复调用出现速度不断加快的BUG。其次定义速度speed, 开启定时器。定时器里用if，else做判断何时停止。

特别说明：

这只是一个运动框架雏形，实际运行中会有不能够准确到达目标地点的bug。可以将判断停止的语句改成如下代码：

if((target-oDiv.offsetLeft)<speed){
      clearInterval(timer);
}

当然这个代码只是一个最基本的框架，但包含了运动的原理。

DB-Ruan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript运动框架

框架思路：1. 定义运动函数：function startMove(){};
复制链接

扫一扫

专栏目录

JavaScript运动框架

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