js运动

Posted 2021-01-31 weikemudan

运动的原理:js定时器对dom元素的操作,来改变元素的状态.

代码编写时需要注意到的问题:如果是对位置的修改,就不能忘记加上‘px‘,否则,就浏览器不会出错,元素的位置也不会改变

下面是css代码:

#div{width: 100px; height: 100px; background: skyblue;position: absolute;top: 50px;left: 0px;}
#line{width: 1px; height: 100px; background: tomato;position: absolute;top: 50px;left: 300px; }

这里是html代码:

1  <div id="div">ceshi</div>
2     <button id="btn1">开始</button>
3     <button id="btn2">停</button>
4     <div id="line"></div>

下面是js代码:

<script>
        var oBtn1=document.getElementById("btn1");
        var oBtn2=document.getElementById("btn2");
        var div=document.getElementById("div");
        oBtn1.onclick=function(){
            startMove(div,8);
        }
        oBtn2.onclick=function(){
           stopMove(div);
        }
        function startMove(obj,sx){
             stopMove(obj);
                obj.timer= setInterval(
                    function(){
                        if(obj.offsetLeft>=300){//此种判断方式不自然,有一种突然跳到300像素的感觉
                              stopMove(obj);
                              obj.style.left=300+‘px‘;
                        }else{
                          obj.style.left=obj.offsetLeft+sx+‘px‘;  
                        }
                        
                    },10
                )
        }
        function stopMove(obj){
            clearInterval(obj.timer);
        }
    </script>

方式二

 function startMove(obj,sx){
             stopMove(obj);
                obj.timer= setInterval(
                    function(){
                        if(300-obj.offsetLeft<sx){//看起来比较自然
                              stopMove(obj);
                              obj.style.left=300+‘px‘;
                        }else{
                          obj.style.left=obj.offsetLeft+sx+‘px‘;  
                        }
                        
                    },10
                )
        }