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);
            }

 

标签：

相关文章