前端筆記之JavaScript（十二）緩衝公式&檢測裝置&Data日期

一、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基礎就到這裡了，後續一些知識點我們在物件導向再見面吧，如果有哪些知識點遺漏了，請聯絡我補充謝謝。