一个简单的Js平移动画函数封装

day07

一、运动函数的封装

div向右运动：div的在当前位置的基础上每次向右移动一定的距离，到指定位置停止

​ 取出每次一次位移前div的位置+偏移量

div向左运动：div在当前位置基础上每次都向左移动指定距离 (当前位置-偏移量)

运动函数的封装：

​ 将整个运动的实现代码放入一个函数中,将运动函数中变化的量(值不确定的，随着应用场景会发生改变的量)提取为参数，例如：位移的目标对象、每次位移的距离、停止的位置、发生变化的属性

/*
   功能：向右移动
   参数：
     @obj     目标物体
     @prop    参与运动的属性
     @step    每次移动的距离
     @target  终点位置
 */
function move(obj, prop, step, target) {
    var preTar = parseFloat(getStyle(obj, prop));//初始位置
    //判断起点和终点的位置关系 决定 step的正负
    step = preTar > target ? -step : step;//
    clearInterval(obj.timer);//清除当前正在起作用的定时器，
    //启动新定时器
    obj.timer = setInterval(function () {
        //思路：div的新位置=取出当前div的位置，在当前位置基础上加位移的距离     
        var speed = parseFloat(getStyle(obj, prop)) + step;// '50px'+5
        //判断当前的位置和终点位置的关系   判断方向

        //preTar>target  初始位置>终点位置    向左
        //preTar<target  初始位置<终点位置    向右
        //if(向右&&到达终点 || 向左&&到达终点)
        if (speed >= target && step > 0 || speed <= target && step < 0) {
            clearInterval(obj.timer);
            speed = target;//到达终点之后，
        }
        obj.style[prop] = speed + "px";
    }, 10);
}

二、Math对象

Math对象封装了数学的相关操作

1.属性

PI 圆周率

2.方法

常见方法：

• abs(x) 求绝对值
• ceil(x) 向上舍入
• floor(x) 向下取整
• round(x) 四舍五入
• max(x,…) 求最大值
• min(x,…) 求最小值
• pow(x,y) x的y次幂
• random() 生成0-1之间的随机数 [0,1)

三、Date对象

Date对象内置了关于时间和日期的常见方法

var d=new Date();//创建一个日期对象的实例     对象的实例化

案例：

        //数字时钟
        showTime();
        // setInterval(showTime, 1000);

        function showTime() {
            var d = new Date();//日期对象的实例
            //年月日
            var year = d.getFullYear();
            var month = d.getMonth() + 1;
            var day = d.getDate();

            //时分秒
            var h = d.getHours();
            var m = d.getMinutes();
            var s = d.getSeconds();

            h = h < 10 ? "0" + h : h;
            m = m < 10 ? "0" + m : m;
            s = s < 10 ? "0" + s : s;
            month = month < 10 ? "0" + month : month;
            day = day < 10 ? "0" + day : day;

            var time = year + "年" + month + "月" + day + "日 " + h + ":" + m + ":" + s;
            document.getElementById("box").innerHTML = time;
            setTimeout(showTime, 1000);//启动一个定时器，1秒钟之后执行showTime函数一次
        }

获取指定日期时间对象：

var d=new Date("2022/3/11 12:00:00");

知识扩展

1.判断语句中的真假

假：false，0，空字符串，undefined，null

真：true ， 数字(除了0)，字符串(除了空字符串)，所有的复杂类型