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

whinc 發(fā)布于2019-08-21 11:27 / 1104人閱讀

摘要：目錄導(dǎo)語對象對象對象方法的應(yīng)用日歷插件小結(jié)導(dǎo)語這是標準庫系列的第二篇文章，主要討論一下對象和對象，對象在平時處理一些數(shù)學(xué)操作時能起到事半功倍的作用，目前小羊接觸到的對象的使用場景是動畫制作對象作為關(guān)于時間的接口，能夠?qū)⑵鋺?yīng)用于制作和時間相關(guān)

目錄 導(dǎo)語 1. Math對象 2. Date對象 3. Date對象方法的應(yīng)用——日歷插件； 4. 小結(jié) 導(dǎo)語

這是《JavaScript標準庫系列》的第二篇文章，主要討論一下Math對象和Date對象，Math對象在平時處理一些數(shù)學(xué)操作時能起到事半功倍的作用，目前小羊接觸到的Math對象的使用場景是動畫制作；
Date對象作為關(guān)于時間的接口，能夠?qū)⑵鋺?yīng)用于制作和時間相關(guān)的應(yīng)用，下文給出一個日歷小插件作為該對象的實際應(yīng)用；

1.Math對象

Math對象提供了數(shù)學(xué)當中常見的屬性和方法，注意的是Math對象并不是構(gòu)造函數(shù)；
Math對象的方法的其中一個應(yīng)用是在制作復(fù)雜的動畫特效時能派上大用場，因此對動畫制作感興趣的童鞋要掌握好；

1.1Math對象的屬性

Math對象的屬性定義常見的數(shù)學(xué)常量：

1.2 Math對象的方法

最值方法

Math.min && Math.max:根據(jù)參數(shù)返回最值；

可利用該方法去獲取數(shù)組的最值；

舍入方法

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

Math.round:四舍五入取整；

隨機數(shù)方法

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

可以通過以下方法獲取任意范圍的隨機數(shù)：

//獲取0~9的數(shù)值
Math.floor(Math.random()*10)
//獲取1~10的數(shù)值
Math.floor(Math.random()*10+1)
//獲取任意范圍的數(shù)值
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
Hello World

//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)

基本數(shù)學(xué)函數(shù)方法

三角函數(shù)方法

【注】：

關(guān)于三角函數(shù)方法的應(yīng)用，可以參考小羊的《基于Canvas的動畫基本原理與數(shù)理分析》一文； 2. Date對象

Date對象使用自UTC1970年1月1日零時開始的經(jīng)過的毫秒數(shù)來保存時間，時間范圍為該時期前后1億天；

2.1 Date對象作為工具方法

Date對象自身的方法
Date對象作為方法使用，帶不帶參數(shù)都返回當前的時間的字符串

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

Date對象的靜態(tài)方法

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

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

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

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

[注]可傳遞的日期字符串不僅限于上述，但是一般采用上面3種日期字符串表示方法；
Date.parse()和Date.UTC()作用類似；

2.2 Date對象的實例方法

Date作為構(gòu)造函數(shù)
Date作為構(gòu)造函數(shù)時，可以生成一個時間對象的實例，不傳參數(shù)將返回當前的時間對象實例，傳遞的參數(shù)可以是多個代表日期的數(shù)值，也可以是日期字符串，還可以是代表時間的毫秒數(shù)；

使用代表日期的數(shù)值設(shè)置時間時要注意各個參數(shù)的取值范圍：

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

Date對象的實例方法
阮一峰的《JavaScript標準參考教程》總結(jié)了3大類方法，小羊根據(jù)其教程篩選了比較常用to類方法，詳見阮一峰的教程；

to類方法

toString:返回當前時區(qū)的時期字符串；

toUTCString:返回當前0時區(qū)的時期字符串；
toDateString:返回日期字符串；
toTimeString:返回時間字符串；
toLocalTimeString:返回當?shù)乇憩F(xiàn)形式的時間字符串

get類方法

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

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

set類方法

setFullYear:設(shè)置實例的四位年份；

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

3.3. Date對象方法的應(yīng)用——日歷插件；

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

4. 小結(jié)

通讀本文之后，我們可以基本清楚理解：

Math對象提供數(shù)學(xué)當中常用的屬性和方法；

Math對象的屬性包括PI、E、LN2、LN10、LOG2E、LOG10E；

MAth對象的方法包括最值方法、舍入方法、隨機數(shù)方法、基本數(shù)學(xué)函數(shù)方法和三角函數(shù)方法；

Date對象的使用可分為Date對象作為工具方法和Date對象的實例方法；

Date對象作為工具方法部分，Date()直接返回當前時間的字符串，注意和new Date()的區(qū)別；Date.now()返回當前距離起始日期的毫秒數(shù)；Date.parse()可以解析日期為毫秒數(shù)；

Date對象可作為構(gòu)造函數(shù)創(chuàng)建一個日期實例，可傳遞多種形式的日期參數(shù)；但要注意不同時間參數(shù)的取值范圍的不同；

Date對象的實例方法可大致分為3大類，to類、get類和set類；其中除了getDay()這一方法在set類中沒有對應(yīng)方法外，其他get類都有對應(yīng)set類方法；

參考資料

《JavaScript高級程序設(shè)計（第3版）》

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

GPU云服務(wù)器云服務(wù)器 javascript類和對象 date對象 Date日期對象 php date對象

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86723.html

發(fā)表評論

登陸后可評論

0條評論

whinc

男|高級講師

我要關(guān)注我要私信

TA的文章

【微信開發(fā)】SpringBoot 集成微信小程序授權(quán)登錄

閱讀 3807·2021-11-12 10:34
主機空間默認首頁文件是什么-虛擬主機中的默認首頁是什么？

閱讀 2822·2021-09-22 15:14
總結(jié)一下各種0.5px的線

閱讀 790·2019-08-30 15:53
怎么實現(xiàn)微信聊天時的氣泡圖（一）

閱讀 3207·2019-08-30 12:53
Css-移動端適配總結(jié)

閱讀 1289·2019-08-29 18:32
css3 新特性

閱讀 2771·2019-08-29 16:41
Js-函數(shù)式編程

閱讀 1068·2019-08-26 13:40
通過拖動列表，重新獲取列表的排序

閱讀 1810·2019-08-23 18:07

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

1.1Math對象的屬性

1.2 Math對象的方法

2.1 Date對象作為工具方法

2.2 Date對象的實例方法

相關(guān)文章

2019年前端筆試題

2019年前端筆試題

**前端面試之路二(javaScript基礎(chǔ)整理)**

JavaScript 基礎(chǔ)知識 - 入門篇(二)

發(fā)表評論

0條評論

whinc

男|高級講師

TA的文章

【微信開發(fā)】SpringBoot 集成微信小程序授權(quán)登錄

主機空間默認首頁文件是什么-虛擬主機中的默認首頁是什么？

總結(jié)一下各種0.5px的線

怎么實現(xiàn)微信聊天時的氣泡圖（一）

Css-移動端適配總結(jié)

css3 新特性

Js-函數(shù)式編程

通過拖動列表，重新獲取列表的排序

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

1.1Math對象的屬性

1.2 Math對象的方法

2.1 Date對象作為工具方法

2.2 Date對象的實例方法

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！