js实现简单的运动--匀速运动

时间:2021-08-24 04:20:14

作为一个学习前端的人来说,学习了js后要能使用才算是入门

不是简单的模仿,是要从最简单的东西学会衍生

今天,我就来发一下自己学习js理论完后第一个接触的基础运动--匀速运动

之后还会发缓冲运动、加速运动

光说看着也烦,话不多说,直接上代码!!!

我将自己的想法都写在注释中,自己边看边学习!!!

每一步都有详细的简介

    <head>
        <meta charset="UTF-8">
        <title>匀速运动</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                position: absolute;
                left:0px;
                top: 0px;
                background: #f40;
                width: 100px;
                height: 100px;
            }
            button{
                width: 80px;
                height: 20px;
                position: absolute;
                top: 200px;
                left: 200px;
            }
            span{
                height: 100px;
                background: #000;
                border: 1px solid #000;
                position: absolute;
                left: 300px;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div></div>
        <button>run</button>
        <span></span>    
    </body>

 

       //首先我们先理一下思路
            //关于运动就三个变量,时间(time)、速度(ispeed)、路程(distance)
            //我们需要元素以什么样的速度,在多少时间里,运动多远
            //怎么给定速度,时间,路程

            //首先获取需要的两个元素
            var oDiv = document.getElementsByTagName('div')[0];//我们运动的元素
            var Btn = document.getElementsByTagName('button')[0];//开始键
            //建立一个方法startMove
            //设立参数 对象(obj)、速度(iSpeed)、路程(Distance)
            function starMove(obj,iSpeed,Distance){
                clearInterval(obj.timer);//清理定时器
                //第一步,var一个iSpeed
                var iSpeed;
                //第三步,进行一个判断,判断元素是在我们需要位置的右边还是左边
                //如果实在右边,那么就是 left--> right 运动,那么就设它的速度为正,即 iSpeed = iSpeed
                //反之,right --> left 运动,那么就设它的速度为负,即 iSpeed = -iSpeed
                if (obj.offsetLeft > Distance) {
                    iSpeed = -iSpeed;
                } else{
                    iSpeed = iSpeed;
                }
                //第二步,创建一个定时器
                timer = setInterval(function () {
                    //第四步,判断大小
                    //判断路程减去元素距离父级元素的绝对值是否小于速度的绝对值
                    //小于,那么它就几乎直接等于路程了,你几乎是看不到的,直接将从路程丢给left属性
                    //大于,那么它偏移的逻辑就是元素距离父级元素的距离加上速度丢给他的left属性
                    if (Math.abs(Distance - obj.offsetLeft) < Math.abs(iSpeed)) {
                        clearInterval(obj.timer);//清理定时器
                        obj.style.left = Distance +'px'
                    } else{
                        obj.style.left = obj.offsetLeft + iSpeed + 'px';
                    }    
                },30)    
            }
            //绑定点击事件
            Btn.onclick = function () {
                //元素为 oDiv ,速度为30 ,距离为300,
                starMove(oDiv,30,300);
            }