欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端笔记知识点整合之JavaScript(十二)缓冲公式&检测设备&Data日期

程序员文章站 2022-12-12 23:54:23
一、JavaScript缓冲公式ease 原生JS没有自己的缓冲公式,但是你要自己推理的话,必须要懂一些数学和物理公式: 让div用100毫秒(帧),从left100px的位置变化到left800px的位置,要求匀速: 大致计算如下: 毫秒编号(帧) 距离起点的增量 目前绝对的位置 0 0 100 ......

一、javascript缓冲公式ease

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

div100毫秒(帧),从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是时间增量,b100c700d100

 t : 当前时间(current time

 b :初始值(begining value

 c :变化量(change in value

 d :持续时间(总步数)(duration

首先bcd三个参数(初始值、变化量、持续时间)在运动开始前,是需要确定好的。

举例:

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

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

前端笔记知识点整合之JavaScript(十二)缓冲公式&检测设备&Data日期

 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基础就到这里了,后续一些知识点我们在面向对象再见面吧,如果有哪些知识点遗漏了,请联系我补充谢谢。

ps:尽量让它越来越规范,前期的文章都是本人的学习时的笔记整理,希望看完后可以指点一二,提提意见多多交流; 

笔记流程:html>css>javascript>jquery>html5/css3>移动端>ajax>面向对象>canvas>nodejs>es678>vue>react>小程序>面试问题

意见请留言,邮箱:scarf666@163.com