javascript中的匀速运动（两种方式）

javascript中的匀速运动

不要小看这个东西呀，机关重重呀

html:

<input type="button"  value="start" onclick="show()"/>
<div id="move">
</div>

css:

#move{
height:100px;
width:100px;
background:green;
position:absolute;
top:100px;
left:0px;
}

js实现第一步：动起来

function show(){
//首先我们要让物体起来
var obj=document.getElementById("move");
var zhen=8;
//定时器
setInterval(function(){
obj.style.left=obj.offsetLeft+zhen+"px";
},20)

}

动起来了，单你不可能让它一直动撒！设定一个终点！假设是300px

var Timer=null;
function show(){
//首先我们要让物体起来
var obj=document.getElementById("move");
var zhen=8;
//定时器
Timer=setInterval(function(){
if(obj.offsetLeft==300){  //注意这里，机关重重呀
clearInterval(Timer)
}
obj.style.left=obj.offsetLeft+zhen+"px";
},20)

}

尼玛，运行一看，居然没停下来，我操，我们来分析机关！



那这么办呢？--终止的条件！

尝试方法一

当它们之间的距离相差一个帧的时候，我们就停止下来，最后让它强制对其滴呀

if(Math.abs((obj.offsetLeft-iTarget))<=Math.abs(speed)){
clearInterval(rightTimer);
obj.style.left=iTarget+'px';
}

尝试方法二

距离/zhen=0，也就是能够整除的时候，我们才能停在指定的地点滴呀!例如：



但是，到这一步，还没有完滴呀；当你多次点击按钮是，你会发现，物体运动的越来越快了呀！

那是因为，你每点击一次，那么就会多生成一个setInterval 对象滴呀!

解决方法就是在setInterval(function (){})前面加上clearInterval(Timer)

最终较为完整的代码如下：

var Timer=null;
function show(){
var obj=document.getElementById("move");
var zhen=10;
clearInterval(Timer) ;
Timer=setInterval(function(){
if(obj.offsetLeft==300){
clearInterval(Timer) ;
}else{
obj.style.left=obj.offsetLeft+zhen+"px";
}
},20)
}

看似简单，又不太简单的运动，有了这个基础之后，我们就可以做出其他的了！

再思考，如果我们要它反向运动呢？

var speed=0;
//目标来减去物体的位置是否大于零，然后判断速度的正负滴呀
var isPlus=iTarget-obj.offsetLeft;
if(isPlus<0){
speed=-7;
}else{
speed=7;
}

然后，我来给出完整的匀速运动的javascript代码滴呀

//下面我来给出完整的代码区域
//运动的几大要素;
//物体自身的位置:obj.offsetLeft;
//目标终点：    iTarget;
//帧           speed;
//Timer
var Timer=null;
function JavaScriptMove(iTarget,Id){
var obj=document.getElementById(Id);
var speed=6;
if(obj.offsetLeft-iTarget>0){
speed=-speed;
}else{
speed=speed; //....
}
//为了防止鼠标的多次点击滴呀
clearInterval(Timer);
//开始运动
Timer=setInterval(function (){
//物体停止的条件:他们之间的距离差值小于一个帧滴呀就停下来...然后
if(Math.abs(obj.offsetLeft-iTarget)<=Math.abs(speed)){
clearInterval(Timer);
//强制移动到目标
obj.style.left=iTarget+"px"; //这样就算是移动到了指定的地点滴呀
}else{
obj.style.left=obj.offsetLeft+speed+'px';
}
},30)

}
//最后还得尝试着，用面向对象的方式进行代码的改造滴滴
//这个物体的简单运动滴呀

javascript 实现匀速匀速方式二：

for循环+闭包+setTimeout （不过，不推荐这种做法，不过可以加深对闭包的理解）

具体的原理你可以看另外一边我的文章

/article/6629410.html

感觉还多帅滴呀

两种方式来实现滴呀