JavaScript標準庫系列——Math對象和Date對象（二）

目錄

導語

1. Math對象

2. Date對象

3. Date對象方法的應用——日曆插件；

4. 小結

---

導語

這是《JavaScript標準庫系列》的第二篇文章，主要討論一下Math對象和Date對象，Math對象在平時處理一些數學操做時能起到事半功倍的做用，目前小羊接觸到的Math對象的使用場景是動畫製做；
Date對象做爲關於時間的接口，可以將其應用於製做和時間相關的應用，下文給出一個日曆小插件做爲該對象的實際應用；

---

1.Math對象

Math對象提供了數學當中常見的屬性和方法，注意的是Math對象並非構造函數；
Math對象的方法的其中一個應用是在製做複雜的動畫特效時能派上大用場，所以對動畫製做感興趣的童鞋要掌握好；

1.1Math對象的屬性

Math對象的屬性定義常見的數學常量：

1.2 Math對象的方法

• 最值方法

Math.min && Math.max:根據參數返回最值；

可利用該方法去獲取數組的最值；

• 舍入方法

Math.floor:向下取整；
Math.ceil:向上取整；

Math.round:四捨五入取整；

• 隨機數方法

Math.random:返回0~1（不包含1）的隨機數；

能夠經過如下方法獲取任意範圍的隨機數：

//獲取0~9的數值
Math.floor(Math.random()*10)
//獲取1~10的數值
Math.floor(Math.random()*10+1)
//獲取任意範圍的數值
function randomNum(min,max){
    if(min-max>0){
        var mid = min;
        min = max;
        max = mid;
    }
    var range = max - min + 1
        return Math.floor(Math.random()*range+min);
};

小小變色特效

//html
<div id="colors" >Hello World
</div>
//js
   var $colors = $('#colors')
      setInterval(function(){
       var pipeRed = randomNum(0,255),
      pipeGreen = randomNum(0,255),
      pipeBlue = randomNum(0,255);
      color = "rgb("+pipeRed+","+pipeGreen+","+pipeBlue+")";
       $colors.css({
         "background":color,
       }) 
       console.log(color)
      },1000)

• 基本數學函數方法
  

• 三角函數方法
  

【注】：

關於三角函數方法的應用，能夠參考小羊的《基於Canvas的動畫基本原理與數理分析》一文；

2. Date對象

Date對象使用自UTC1970年1月1日零時開始的通過的毫秒數來保存時間，時間範圍爲該時期先後1億天；

2.1 Date對象做爲工具方法

• Date對象自身的方法
  Date對象做爲方法使用，帶不帶參數都返回當前的時間的字符串

注意：new Date()返回的是對象，雖然兩者看上去很像；

• Date對象的靜態方法

Date.now():返回當前距離1970年1月1日 00:00:00 UTC的毫秒數；

Date.UTC():返回設置的參數距離1970年1月1日 00:00:00 UTC的毫秒數，參數格式爲：year, month[, date[, hrs[, min[, sec[, ms]]]]]

[注]12個月份分別有0~11表示，上面的11表明12月；

Date.parse():解析日期字符串，返回當前距離1970年1月1日 00:00:00 UTC的毫秒數；

[注]可傳遞的日期字符串不只限於上述，可是通常採用上面3種日期字符串表示方法；
Date.parse()和Date.UTC()做用相似；

2.2 Date對象的實例方法

• Date做爲構造函數
  Date做爲構造函數時，能夠生成一個時間對象的實例， 不傳參數將返回當前的時間對象實例，傳遞的參數能夠是多個表明日期的數值，也能夠是日期字符串，還能夠是表明時間的毫秒數；

使用表明日期的數值設置時間時要注意各個參數的取值範圍：

year: 4位年份;
month: 0-11，這個要注意；
date:1-31;
hour:0-23;
minute:0-59;
second:0-59
ms:0-999

• Date對象的實例方法
  阮一峯的《JavaScript標準參考教程》總結了3大類方法，小羊根據其教程篩選了比較經常使用to類方法，詳見阮一峯的教程；

to類方法

toString:返回當前時區的時期字符串；

toUTCString:返回當前0時區的時期字符串；
toDateString:返回日期字符串；
toTimeString:返回時間字符串；
toLocalTimeString:返回當地表現形式的時間字符串

get類方法

getFullYear:獲取實例的四位年份；

getMonth:獲取月份（0表1月，11表12月）；
getDate:獲取第幾天；
getDay:獲取星期（0爲星期日，6爲星期六）；
getHours:返回小時；
getMinutes:返回分鐘；
getSeconds:返回秒；
getMilliseconds:返回毫秒；
getTime():返回距離1970年1月1日00:00:00的毫秒數，至關於valueOf();

set類方法

setFullYear:設置實例的四位年份；

setMonth:設置月份；
setDate:設置日子；
setHours:設置小時；
setMinutes:設置分鐘；
setSeconds:設置秒；
setMilliseconds:設置毫秒；
setTime:設置毫秒時間戳；

---

3.3. Date對象方法的應用——日曆插件；

日期插件件詳見小羊的文章[《[簡潔的jQuery日曆小插件]》](http://www.jianshu.com/p/048d...；

---

4. 小結

通讀本文以後，咱們能夠基本清楚理解：

• Math對象提供數學當中經常使用的屬性和方法；

• Math對象的屬性包括PI、E、LN二、LN十、LOG2E、LOG10E；

• MAth對象的方法包括最值方法、舍入方法、隨機數方法、基本數學函數方法和三角函數方法；

• Date對象的使用可分爲Date對象做爲工具方法和Date對象的實例方法；

• Date對象做爲工具方法部分，Date()直接返回當前時間的字符串，注意和new Date()的區別；Date.now()返回當前距離起始日期的毫秒數；Date.parse()能夠解析日期爲毫秒數；

• Date對象可做爲構造函數建立一個日期實例，可傳遞多種形式的日期參數；但要注意不一樣時間參數的取值範圍的不一樣；

• Date對象的實例方法可大體分爲3大類，to類、get類和set類；其中除了getDay()這一方法在set類中沒有對應方法外，其餘get類都有對應set類方法；

---

參考資料

• 《JavaScript高級程序設計（第3版）》

• 《JavaScript標準參考教程》——阮一峯