匀速运动（js）

css:

#div{
    width:100px;
    height:100px;
    background: yellowgreen;
    position: absolute;
    left:0;/*更改初始位置*/
    top:50px;
}
 #line{
     width:1px;
     height:300px;
     background:red;
     position: absolute;
     left:300px;
 }

html:

<div id="div"></div>
<input id="btn" type="button" value="开始运动">
<div id="line"></div>

js:

window.onload=function () {
    var oBtn=document.getElementById("btn");
    var oDiv=document.getElementById("div");
    oBtn.onclick=function () {
        startMove(300)
    }
    //运动框架
    var timer=null;
    function startMove(itarget) {
        clearInterval(timer);
        timer=setInterval(function () {
            var iSpeed=0;
            if(oDiv.offsetLeft<itarget){
                iSpeed=7
            }else{
                iSpeed=-7
            }
            if(Math.abs(oDiv.offsetLeft-itarget)<7){
                clearInterval(timer);
                oDiv.style.left=itarget+"px"
            }else{
                oDiv.style.left=oDiv.offsetLeft+iSpeed+"px";
            }
        },30)
    }
}