让梦想照进现实，js 基础收尾工作-运动框架基本写法

一个任务到了最后阶段，往往人会很松懈，结果导致不能很好的完成特定的任务，所以有时候我在想

要达到目标不是做了什么，而是不做什么，比如，看电视，打游戏，做些莫名其妙的事情，不懂得珍惜时间

真的不行，个人认为，一个越优秀的人时间也越宝贵

好了，不扯了，今天我们来复习运动框架，这个以前我写过，可是我发现没彻底掌握，这次，重新开始， 相信为学日益，一遍一遍效果！

基本功能就是点击move 按钮的时候， 红色的div 移动到目标位置：

先看布局

好了，以上布局都很简单，我们开始进入js 代码部分

首先呢，我们先复习下前面学习过的连个方法（添加事件监听器的方法和 获取属性值的方法（都是兼容写法））

不会的同学可以看我前面的文章

 

好，我们继续！

 

上面代码绑定兼容，和获取控件都是很简单的，我们重点关注重点逻辑这一些块！

在开启定时器之前先清空定时器，这个操作很常见，加入不写这句，当你多次点击按钮时，它就会创建多个定时器，那你多点几次，红色的div 会运动越来越快

 

 

每个20 毫秒，就执行回调函数

回调函数逻辑很简单，上面都写好了，要是到达目的地，则停下（清空定时器） 若没到达，则往右边走

这句话也特别重要，就是最后一次有可能超出最后目的地，这不行， 所以要修正下边界，你将speed 改成7 

去掉这句话，就会发现超出了500px ,所以要加这就话修正边界！