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

函数封装"/>

一个简单的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)，字符串(除了空字符串)，所有的复杂类型