题外话：最近工作太忙，只有晚上下班了才能把自己挤时间学习到的知识跟大家做一分享，如有说的不对或不到的，还是请求大家多多指教。
今天要说的是javascript的运动（最最最最最简单的），前几天的《定时器的使用之无缝图片滚动》文章中，介绍了用setInterval的方法实现运动的基本方法，这一篇文章主要是对js实现运动的方式进行进一步的深入了解。
好了，进入正题——从一个方块的移动来逐步了解js的运动
1、在html页面上先做出一个要运动的方块，一个控制运动的按钮。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js之运动框架</title>
<style type="text/css">
#div1{width:200px; height:200px; background:red; position: absolute; left:0px; top:100px;}
</style>
</head>
<body>
<input type="button" id="btn1" value="开始运动">
<div id="div1"></div>
</body>
</html>
2、实现第一个效果，点击按钮，让红色方块从左向右动起来。相信学习过《定时器的使用之图片无缝滚动》的都知道如何做了。写一个startMove()函数
<script type="text/javascript">
function startMove() {
var oDiv = document.getElementById("div1");
setInterval(function() {
oDiv.style.left = oDiv.offsetLeft + 10 + "px";
}, 30);
}
</script>
给btn1按钮增加一个onclick属性，值就为startMove()函数。
<input type="button" id="btn1" value="开始运动" onclick="startMove()">
3、效果出来了，不过红色方块动起来一直不停地往右走，怎么可以让方块到一定位置停下来呢？相信大家都已经找到方法了，增加一个判断的函数，当方块向右移动到300像素的时候停下来，同时为了控制方块移动的速度，我们增加一个变量speed。
<script type="text/javascript">
var timer = null; //全局变量
function startMove() {
var oDiv = document.getElementById("div1");
var speed = 10;//局部变量
timer = setInterval(function() {
if(oDiv.offsetLeft >= 300) {
clearInterval(timer);
}
oDiv.style.left = oDiv.offsetLeft + speed + "px";
}, 30);
}
</script>
4、效果又出来了，但是还有问题。大家可能也发现了，当停下来之后继续点按钮，红色方块还会按照speed的速度一次走那么一点点。原因就是当再次点击按钮的时候，肯定会执行startMove()函数，开一个定时器，虽然if判断它已经到300了，但是已经启动的这个定时器到下次才会停止，所以会执行一次oDiv.offsetLeft + speed 操作。解决方法很简单，增加一个else就可以咯，保证只有在offset<300时候才会执行运动。
if(oDiv.offsetLeft >= 300) {
clearInterval(timer);
}
else
{
oDiv.style.left = oDiv.offsetLeft + speed + "px";
}
5、还有问题么？当然有，你把speed速度改成1，当方块正在运动时，你再多点几下按钮，发现什么了么？对的，方块移动的速度越来越快咯。这是为什么呢？因为每点击一次按钮，就会开一个定时器，点10次，就相当于每30毫秒，有10个定时器在同时起作用，自然每30毫秒移动的速度就不是1而是10了。怎么解决这个问题？方法也简单，就是在定时器启动前先清除一下已开的定时器，保证只有一个定时器开着。
clearInterval(timer);
timer = setInterval(function() {………
好了，今天先分享到这里，js的基础运动就是这么简单，先把这些代码敲一敲，更深刻地理解一下吧。其实在第三步时候还有一些漏洞，知道是什么吗，各位亲们，下回分解。
PS：如果喜欢我分享的小知识，请关注我的头条号，记得点赞哦...
苏公网安备 32050502001014号