一、JavaScript缓冲公式ease

原生JS没有自己的缓冲公式，但是你要自己推理的话，必须要懂一些数学和物理公式：

让div用100毫秒（帧），从left100px的位置变化到left800px的位置，要求匀速：

大致计算如下：

毫秒编号（帧）	距离起点的增量	目前绝对的位置
0	0	100
1	7	107
2	14	114
...	...	...
t	t*c/d	b+t*c/d
49	343	443
50	350	450
98	686	786
99	693	793
100	700	800

t是时间增量，b为100，c为700，d为100

t : 当前时间（current time）

b ：初始值（begining value）

c ：变化量（change in value）

d ：持续时间（总步数）（duration）

首先b、c、d三个参数（初始值、变化量、持续时间）在运动开始前，是需要确定好的。

举例：

div要向右缓动，left初始值100，那么b就是100，要向右移动700，那么c就是700，至于d的设置就比较灵活，只要符合t是从0向d递增或递减就可以了

d根步骤配合使用来设置持续时间，例如d设置为100，如果设置步长是1，那么从0到100就有100步，即分100次完成这个过程，步数越多那么持续时间就越长。

2次：=100+A2*A2*700/(100*100)

3次：=100+A2*A2*A2*700/(100*100*100)

正弦1次： =100+SIN(A2/20)*700/SIN(100/20)

正弦2次：=100+SIN(A2/20)*SIN(A2/20)*700/(SIN(100/20)*SIN(100/20))

var oDiv = document.getElementsByTagName('div');
var f = 0;
var timer = setInterval(function(){f++;if(f >= 100){clearInterval(timer);}oDiv[0].style.left = linear(f,100,700,100) + "px";oDiv[1].style.left = ease_2(f,100,700,100) + "px";oDiv[2].style.left = ease_3(f,100,700,100) + "px";oDiv[3].style.left = ease_sin(f,100,700,100) + "px";oDiv[4].style.left = ease_sin2(f,100,700,100) + "px";
},20);
// 推理出的匀速公式
function linear(t,b,c,d){return b + t * c / d;
}
function ease_2(t,b,c,d){return b + t * t * c / (d * d);
}
function ease_3(t,b,c,d){return b + t * t * t * c / (d * d * d);
}
function ease_sin(t,b,c,d){return b + Math.sin(t/20) * c / Math.sin(d/20);
}function ease_sin2(t,b,c,d){return b + Math.sin(t/20)*Math.sin(t/20) * c / (Math.sin(d/20)*Math.sin(d/20));
}

二、检测设备跳转

if(/(iPhone|iPad)/i.test(navigator.userAgent)){//如果当前设备是手持设备，就跳转到以下网址window.location.href = 'https://m.taobao.com/';
}else if(/(Android)/i.test(navigator.userAgent)){window.location.href = 'https://m.baidu.com/';
}

三、Date日期对象

Date() 方法可返回当天的日期和时间

Date() 返回当日的日期和时间。

getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。

getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。

getMonth() 从 Date 对象返回月份 (0 ~ 11)。

getFullYear() 从 Date 对象以四位数字返回年份。

getHours() 返回 Date 对象的小时 (0 ~ 23)。

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。

getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。

getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。

getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

JavaScript基础就到这里了，后续一些知识点我们在面向对象再见面吧，如果有哪些知识点遗漏了，请联系我补充谢谢。

转载于:https://www.cnblogs.com/rope/p/10628582.html

前端笔记之JavaScript（十二）缓冲公式检测设备Data日期相关推荐

OpenCV学习笔记（五十一）——imge stitching图像拼接stitching OpenCV学习笔记（五十二）——号外：OpenCV 2.4.1 又出来了。。。。。 OpenCV学习笔记（五
OpenCV学习笔记(五十一)--imge stitching图像拼接stitching stitching是OpenCV2.4.0一个新模块,功能是实现图像拼接,所有的相关函数都被封装在Stitch ...
OpenCV学习笔记（四十一）——再看基础数据结构core OpenCV学习笔记（四十二）——Mat数据操作之普通青年、文艺青年、暴力青年 OpenCV学习笔记（四十三）——存取像素值操作汇总co
OpenCV学习笔记(四十一)--再看基础数据结构core 记得我在OpenCV学习笔记(四)--新版本的数据结构core里面讲过新版本的数据结构了,可是我再看这部分的时候,我发现我当时实在是看得太马 ...
OpenCV学习笔记（三十一）——让demo在他人电脑跑起来 OpenCV学习笔记（三十二）——制作静态库的demo，没有dll也能hold住 OpenCV学习笔记（三十三）——用haar特征训练自己
OpenCV学习笔记(三十一)--让demo在他人电脑跑起来这一节的内容感觉比较土鳖.这从来就是一个老生常谈的问题.学MFC的时候就知道这个事情了,那时候记得老师强调多次,如果写的demo想在人家那 ...
李弘毅机器学习笔记：第十二章—Recipe of Deep Learning
李弘毅机器学习笔记:第十二章-Recipe of Deep Learning 神经网络的表现如何改进神经网络? 新的激活函数梯度消失怎么样去解决梯度消失? Adaptive Learning R ...
Slicer学习笔记（六十二）slicer下导出模块接口
Slicer学习笔记(六十二)slicer下导出模块接口 1. 参考文件实现 1. 参考文件实现通过配置config_file为每一个生成类添加 Export,并为每个Module生成 Export ...
Slicer学习笔记（四十二）slicer c++源码编译
Slicer学习笔记(四十二)slicer c++源码编译 1.cmake生成项目 2.编译失败的原因汇总 2.1.下载代码失败之前在windows下编译slicer,没有做笔记. 后面再次编译还会 ...
第五十二讲 DTS（设备树）
第五十二讲 DTS(设备树) 一.简介随着硬件设备的种类逐年递增,板级platform平台设备文件越来越多.在过去的Linux中,arch/arm/plat-xxx和arch/arm/mach-xx ...
【正点原子MP157连载】第二十二章新字符设备驱动实验-摘自【正点原子】STM32MP1嵌入式Linux驱动开发指南V1.7
1)实验平台:正点原子STM32MP157开发板 2)购买链接:https://item.taobao.com/item.htm?&id=629270721801 3)全套实验源码+手册+视频 ...
《网络安全工程师笔记》第十二章：域
注:本笔记来自温晓飞老师的网络安全课程第十二章:域第一章:虚拟化架构与系统部署第二章:IP地址详解第三章:进制转换第四章:DOS基本命令与批处理第五章:用户与组管理第六章:服务器远程管理 ...

前端笔记之JavaScript（十二）缓冲公式检测设备Data日期

一、JavaScript缓冲公式ease

二、检测设备跳转

三、Date日期对象

前端笔记之JavaScript（十二）缓冲公式检测设备Data日期相关推荐

最新文章

热门文章