摘要:目錄導語對象對象對象方法的應用日歷插件小結導語這是標準庫系列的第二篇文章,主要討論一下對象和對象,對象在平時處理一些數學操作時能起到事半功倍的作用,目前小羊接觸到的對象的使用場景是動畫制作對象作為關于時間的接口,能夠將其應用于制作和時間相關
目錄 導語 1. Math對象 2. Date對象 3. Date對象方法的應用——日歷插件; 4. 小結 導語
這是《JavaScript標準庫系列》的第二篇文章,主要討論一下Math對象和Date對象,Math對象在平時處理一些數學操作時能起到事半功倍的作用,目前小羊接觸到的Math對象的使用場景是動畫制作;
Date對象作為關于時間的接口,能夠將其應用于制作和時間相關的應用,下文給出一個日歷小插件作為該對象的實際應用;
Math對象提供了數學當中常見的屬性和方法,注意的是Math對象并不是構造函數;
Math對象的方法的其中一個應用是在制作復雜的動畫特效時能派上大用場,因此對動畫制作感興趣的童鞋要掌握好;
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); };
小小變色特效
//htmlHello 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)
基本數學函數方法
三角函數方法
【注】:
關于三角函數方法的應用,可以參考小羊的《基于Canvas的動畫基本原理與數理分析》一文; 2. Date對象Date對象使用自UTC1970年1月1日零時開始的經過的毫秒數來保存時間,時間范圍為該時期前后1億天;
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()作用類似;
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:設置毫秒時間戳;
日期插件件詳見小羊的文章[《[簡潔的jQuery日歷小插件]》](http://www.jianshu.com/p/048d...;
4. 小結通讀本文之后,我們可以基本清楚理解:
Math對象提供數學當中常用的屬性和方法;
Math對象的屬性包括PI、E、LN2、LN10、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標準參考教程》——阮一峰
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86723.html
摘要:為了實現這一點,他們創建了兩種呈現模式標準模式和混雜模式。不存在或形式不正確會導致和文檔以混雜模式呈現。無論是否編寫了有效的,如果選擇了錯誤的,那么頁面就將以混雜模式呈現,其行為就可能會有錯誤或不可預測。 什么是web標準?WEB標準不是某一個標準,而是一系列標準的集合。網頁主要由三部分組成:結構(Structure)、表現(Presentation)和行為 (Behavior)。...
摘要:為了實現這一點,他們創建了兩種呈現模式標準模式和混雜模式。不存在或形式不正確會導致和文檔以混雜模式呈現。無論是否編寫了有效的,如果選擇了錯誤的,那么頁面就將以混雜模式呈現,其行為就可能會有錯誤或不可預測。 什么是web標準?WEB標準不是某一個標準,而是一系列標準的集合。網頁主要由三部分組成:結構(Structure)、表現(Presentation)和行為 (Behavior)。...
摘要:在標簽中添加屬性,本質上是跟在標簽里面寫屬性時一樣的,所以屬性值最終都會編譯為字符串類型。這個節點包括很多,比如,以及一些方法等方法。一個對象有很多,該集合名字為,里面有其他以及,里面有很多。 一、變量類型和計算 JS中使用typeof能得到哪些類型 變量類型 值類型:變量本身就是含有賦予給它的數值的,它的變量本身及保存的數據都存儲在棧的內存塊當中 引用類型:引用類型當然是分配到...
摘要:函數可以沒有返回值,會在最后面返回一個。事物的行為在對象中用方法來表示。 11. 函數 11.1 函數的基礎知識 為什么會有函數? 在寫代碼的時候,有一些常用的代碼需要書寫很多次,如果直接復制粘貼的話,會造成大量的代碼冗余;函數可以封裝一段重復的javascript代碼,它只需要聲明一次,就可以多次調用; 冗余代碼: 冗余:多余的重復或啰嗦內容 缺點: 代碼重復,可閱讀性差 ...
閱讀 3793·2021-11-12 10:34
閱讀 2812·2021-09-22 15:14
閱讀 778·2019-08-30 15:53
閱讀 3196·2019-08-30 12:53
閱讀 1280·2019-08-29 18:32
閱讀 2761·2019-08-29 16:41
閱讀 1056·2019-08-26 13:40
閱讀 1795·2019-08-23 18:07