JavaScript基礎入門06

阿新 • • 發佈：2019-05-11

string amp one 子午線 tle ber ril 日期字符串 rst

JavaScript 基礎入門06
- Math 對象
  - Math對象的靜態屬性
  - Math對象的靜態方法
  - 指定範圍的隨機數
  - 返回隨機字符
  - 三角函數
- Date對象
  - 基礎知識
  - 日期對象具體API
  - 構造函數
  - 實例方法
  - 思考題

JavaScript 基礎入門06

Math 對象

JavaScript

當中的Math對象是原生對象，提供各種數學功能。該對象並不是構造函數，不能夠生成實例，所有的屬性和方法都必須在Math對象上調用。

我們會在下面的內容中來分享一下這個對象的屬性和方法。

Math對象的靜態屬性

Math.E：常數e。
Math.LN2：2 的自然對數。
Math.LN10：10 的自然對數。
Math.LOG2E：以 2 為底的e的對數。
Math.LOG10E：以 10 為底的e的對數。
Math.PI：常數π。
Math.SQRT1_2：0.5 的平方根。
Math.SQRT2：2 的平方根。

Math.E // 2.718281828459045
Math.LN2 // 0.6931471805599453
Math.LN10 // 2.302585092994046
Math.LOG2E // 1.4426950408889634
Math.LOG10E // 0.4342944819032518
Math.PI // 3.141592653589793
Math.SQRT1_2 // 0.7071067811865476
Math.SQRT2 // 1.4142135623730951

需要註意的是，這些屬性是只讀的，不能修改。

Math對象的靜態方法

Math.abs()：絕對值
Math.ceil()：向上取整
Math.floor()：向下取整
Math.max()：最大值
Math.min()：最小值
Math.pow()：指數運算
Math.sqrt()：平方根
Math.exp()：e的指數
Math.round()：四舍五入
Math.random()：隨機數

案例：

var a = 10;

console.log(Math.abs(a)); // 10  
console.log(Math.max(10,20,30)); // 30  
console.log(Math.pow(a,2));// 100
console.log(Math.sqrt(4)); // 2 
console.log(Math.round(4.3));
console.log(Math.random()) // 產生隨機數

在日常開發的時候，我們經常使用隨機數，但是既然是隨機數，可能存在等於0的現象，但是絕對是小於1的。

指定範圍的隨機數

下面我們來實現一個生成任意範圍的隨機數函數：

function randomRange(min,max) {
  return Math.random() * (max - min) + min;
}

var val = randomRange(1,2);
console.log(val);

我們也可以將上面的代碼更改一下，創建一個生成隨機整數的函數。

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

getRandomInt(1, 6) // 5

返回隨機字符

function random_str(length) {
  var ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  ALPHABET += 'abcdefghijklmnopqrstuvwxyz';
  ALPHABET += '0123456789-_';
  var str = '';
  for (var i = 0; i < length; ++i) {
    var rand = Math.floor(Math.random() * ALPHABET.length);
    str += ALPHABET.substring(rand, rand + 1);
  }
  return str;
}

random_str(6) // "NdQKOr"

上面代碼中，random_str函數接受一個整數作為參數，返回變量ALPHABET內的隨機字符所組成的指定長度的字符串。

三角函數

Math對象還提供一系列三角函數方法。

Math.sin()：返回參數的正弦（參數為弧度值）
Math.cos()：返回參數的余弦（參數為弧度值）
Math.tan()：返回參數的正切（參數為弧度值）
Math.asin()：返回參數的反正弦（返回值為弧度值）
Math.acos()：返回參數的反余弦（返回值為弧度值）
Math.atan()：返回參數的反正切（返回值為弧度值）

Math.sin(0) // 0
Math.cos(0) // 1
Math.tan(0) // 0

Math.sin(Math.PI / 2) // 1

Math.asin(1) // 1.5707963267948966
Math.acos(1) // 0
Math.atan(1) // 0.7853981633974483

Date對象

Date對象是 JavaScript 原生的時間庫。它以國際標準時間（UTC）1970年1月1日00:00:00作為時間的零點，可以表示的時間範圍是前後各1億天（單位為毫秒）。

基礎知識

標準時間

一般而言的標準時間是指GMT和UTC，以前是GMT，現在是UTC。

GMT

格林尼治標準時間(GMT)是指位於倫敦郊區的皇家格林尼治天文臺的標準時間，因為本初子午線被定義在通過那裏的經線

??理論上來說，格林尼治標準時間的正午是指當太陽橫穿格林尼治子午線時(也就是在格林尼治上空最高點時)的時間。由於地球在它的橢圓軌道裏的運動速度不均勻，這個時刻可能和實際的太陽時相差16分鐘

??地球每天的自轉是有些不規則的，而且正在緩慢減速。所以，格林尼治時間已經不再被作為標準時間使用。現在的標準時間由世界協調時間(UTC)提供。

UTC

世界協調時間(UTC)又稱世界統一時間，世界標準時間，國際協調時間，全稱Coordinated Universal Time，是以原子時秒長為基礎，在時刻上盡量接近於世界時的一種時間計量系統

??這套時間系統被應用於許多互聯網和萬維網的標準中，中國大陸、中國香港、中國澳門、中國臺灣、蒙古國、新加坡、馬來西亞、菲律賓、西澳大利亞州的時間與UTC的時差均為+8，也就是UTC+8

在軍事中，協調世界時區會使用“Z”來表示。又由於Z在無線電聯絡中使用“Zulu”作代稱，協調世界時也會被稱為"Zulu time"。

日期時間格式

ECMAScript定義了一個基於簡化的ISO8601擴展格式的日期時間的字符串互換格式

??日期時間完整格式為: YYYY-MM-DDTHH:mm:ss.sssZ

??註意：前置0不能省略，否則在完整格式的情況下會報錯

YYYY        公歷中年的十進制數字，如果這個參數值在0-99之間，則向它加上1900
-           在字符串中直接以“-”(破折號)出現兩次
MM          一年中的月份，從01(一月)到12(十二月)
DD          月份中的日期，從01到31
T           在字符串中直接以“T”出現，用來表明時間元素的開始
HH          用兩個十進制數字表示的，自午夜0點以來的小時數
:           在字符串中直接以“:”(冒號)出現兩次
mm          是用兩個十進制數字表示的，自小時開始以來的分鐘數
ss          是用兩個十進制數字表示的，自分開始以來的秒數
.           在字符串中直接以“.”(點)出現
sss         是用三個十進制數字表示的，自秒開始以來的毫秒數
Z           是時區偏移量，由（“Z”(指UTC)或“+”或“-”）和後面跟著的時間表達式hh:mm組成

只表示日期的格式: YYYY YYYY-MM YYYY-MM-DD

??註意：所有數字必須是10進制的。如果缺少MM或DD字段，用“01”作為它們的值。如果缺少mm或ss字段，用“00”作為它們的值，對於缺少的sss用“000”作為它的值。對於缺少的時區偏移量用“Z”

閏年

年分為閏年和平年，平年有365天，閏年有366天，閏年的2月比平年多一天

閏年的定義是(可被4整除)且((不可被100整除)或(可被400整除))的年份。

function IsLeapYear(year){
    if(typeof year == 'number'){
        if((year % 4 === 0 && year % 100 !== 0)  || year % 400 === 0){
            return 'leap year'
        }else{
            return 'common year'
        }
    }
    return 'please input number'
}

結果為：

console.log(IsLeapYear(4));//'leap year'
console.log(IsLeapYear(400));//'leap year'
console.log(IsLeapYear(2000));//'leap year'
console.log(IsLeapYear(1900));//'common year'

月和日

一年有12個月，其中4、6、9、11月每月有30天；如果是閏年，2月有29天，否則，2月有28天。1、3、5、7、8、10、12月每月有31天

?在javascript中，月的計算從0開始，所以1-12月，分別用0-11來表示；而日的計算則從1開始，1就代表第1天，以此類推。

if(month == 2){
    //如果是閏年
    if((year % 4 === 0 && year % 100 !== 0)  || year % 400 === 0){
        days = 29;
    //如果是平年
    }else{
        days = 28;
    }
//如果是第4、6、9、11月
}else if(month == 4 || month == 6 ||month == 9 ||month == 11){
    days = 30;
}else{
    days = 31;
}

在javascript中，月份的簡寫經常在日期字符串中使用

一月       Jan January
二月       Feb February
三月       Mar March
四月       Apr April
五月       May May
六月       Jun June
七月       Jul July
八月       Aug August
九月       Sep September
十月       Oct October
十一月     Nov November
十二月     Dec December

星期

星期是從星期日開始，到星期六結束，分別用0-6來表示

在javascript中，各星期的簡寫經常在日期字符串中使用

星期日    sunday         Sun
星期一    monday         Mon
星期二    Tuesday        Tue
星期三    Wednesday      Wed
星期四    Thursday       Thu
星期五    Friday        Fri
星期六    Saturday       Sar

時分秒

 1天 = 24小時 = 24*60(1440)分 = 24*60*60(86400)秒 = 86,400,000毫秒
 1分= 60秒
 1小時 = 3600秒
 1天 = 86400秒

Date對象返回的是一個毫秒數，經常需要將其換算成時分秒的形式

date = 100000s
day(天) = Math.floor(100000/86400) = 1
hour(小時) = Math.floor((100000%86400)/3600) = 3
minute(分) = Math.floor((100000%3600)/60) = 46
second(秒) = Math.floor(100000%60)=40
console.log(100000 === 1*86400+ 3*3600+ 46*60+40);//true

日期對象具體API

靜態方法

?Date對象總共有三個靜態方法，分別是Date.now()、Date.parse()、Date.UTC()。這些方法通過Date()構造函數本身調用，而不是通過Date實例對象。

Date.now()

??ECMAScript5新增了now()方法，該方法返回當前時間距離1970年1月1日0點UTC的毫秒數。該方法不支持傳遞參數.

??註意：該方法返回的是Number數字類型

console.log(Date.now());//1468297046050
console.log(Date.now('2016,1,1'));//1468297046050
console.log(typeof Date.now());//'number'

在不支持Date.now()方法的瀏覽器中，可以用+操作符把Date對象轉換成數字，也可以實現類似效果

console.log(new Date());//Tue Jul 12 2016 12:21:33 GMT+0800 (中國標準時間)
console.log(+new Date());//1468297293433
console.log(+new Date(2000,1,1));//949334400000

該方法常用於分析代碼的工作

var start = Date.now();
doSomething();
var stop = Date.now();
result = stop - start;

Date.parse()

該方法用於解析一個日期字符串，參數是一個包含待解析的日期和時間的字符串，返回從1970年1月1日0點到給定日期的毫秒數.

??該方法會根據日期時間字符串格式規則來解析字符串的格式，除了標準格式外，以下格式也支持。如果字符串無法識別，將返回NaN

1、‘月/日/年‘ 如6/13/2004

2、‘月日,年‘ 如January 12,2004或Jan 12,2004

3、‘星期月日年時:分:秒時區‘ Tue May 25 2004 00:00:00 GMT-0700

註意：瀏覽器不支持不表示日期只表示時間的字符串格式

console.log(Date.parse('6/13/2004'));//1087056000000
console.log(Date.parse('January 12,2004'));//1073836800000
console.log(Date.parse('Tue May 25 2004 00:00:00 GMT-0700'));//1085468400000
console.log(Date.parse('2004-05-25T00:00:00'));//1085443200000
console.log(Date.parse('2016'));//1451606400000
console.log(Date.parse('T00:00:00'));//NaN
console.log(Date.parse());//NaN

註意：在ECMAScript5中，如果使用標準的日期時間字符串格式規則的字符串中，月份前有前置0，則會解析為UTC時間，時間沒有前置0，則會解析為本地時間。其他情況一般都會解析為本地時間

console.log(Date.parse('7/12/2016'));//1468252800000
console.log(Date.parse('2016-7-12'));//1468252800000
console.log(Date.parse('2016-07-12'));//1468281600000

Date.UTC()

?Date.UTC()同樣返回給定日期的毫秒數，但其參數並不是一個字符串，而是分別代表年、月、日、時、分、秒、毫秒的數字參數.

Date.UTC(year,month,day,hours,minutes,seconds,ms)，year和month參數是固定的，其余參數可選，

console.log(Date.UTC.length);//7

?註意：該方法使用的是UTC時間，而不是本地時間

console.log(Date.UTC(1970));//NaN
console.log(Date.UTC(1970,0));//0
console.log(Date.UTC(1970,0,2));//86400000
console.log(Date.UTC(1970,0,1,1));//3600000
console.log(Date.UTC(1970,0,1,1,59));//714000
console.log(Date.UTC(1970,0,1,1,59,30));//717000

構造函數

?Date()構造函數有多達5種的使用方法。

第一種使用方式

Date()函數可以不帶new操作符，像一個函數一樣調用。它將忽略所有傳入的參數，並返回當前日期和時間的一個字符串表示。

    Date();

?註意：由於Date()函數沒有使用操作符，實際上它不能被稱為構造函數

console.log(Date());//"Tue Jul 12 2016 13:38:41 GMT+0800 (中國標準時間)"
console.log(Date('2016/1/1'));//"Tue Jul 12 2016 13:38:41 GMT+0800 (中國標準時間)"
console.log(typeof Date());//'string'

第二種使用方式

Date()函數使用new操作符，且不帶參數時，將根據當前時間和日期創建一個Date對象

  new Date();

console.log(new Date());//Tue Jul 12 2016 13:41:45 GMT+0800 (中國標準時間)
console.log(new Date);//Tue Jul 12 2016 13:41:45 GMT+0800 (中國標準時間)
console.log(typeof new Date());//'object'

第三種使用方式

Date()函數可接受一個數字參數，該參數表示設定時間與1970年1月1日0點之間的毫秒數

new Date(milliseconds);

console.log(new Date(0));//Thu Jan 01 1970 08:00:00 GMT+0800 (中國標準時間)
console.log(new Date(86400000));//Fri Jan 02 1970 08:00:00 GMT+0800 (中國標準時間)
console.log(typeof new Date(0));//object

第四種使用方式

Date()函數可接受一個字符串參數，參數形式類似於Date.parse()方法。但parse()方法返回的是一個數字，而Date()函數返回的是一個對象

new Date(datestring);

console.log(new Date('6/13/2004'));//Sun Jun 13 2004 00:00:00 GMT+0800 (中國標準時間)
console.log(Date.parse('6/13/2004'));//1087056000000
console.log(typeof new Date(6/13/2004));//object
console.log(typeof Date.parse(6/13/2004));//number

??關於標準的日期時間字符串中前置0的處理，也類似於Date.parse()方法，若有前置0，則相當於UTC時間，若沒有，則相當於本地時間。其余情況一般都為本地時間

console.log(new Date('7/12/2016'));//Tue Jul 12 2016 00:00:00 GMT+0800 (中國標準時間)
console.log(new Date('2016-7-12'));//Tue Jul 12 2016 00:00:00 GMT+0800 (中國標準時間)
console.log(new Date('2016-07-12'));//Tue Jul 12 2016 08:00:00 GMT+0800 (中國標準時間)

第五種使用方式

Date()函數可接受參數形式類似於Date.UTC()方法的參數，但Date.UTC()方法返回是一個毫秒數，且是UTC時間，而Date()函數返回是一個對象，且是本地時間

console.log(new Date(2016,7,12));//Fri Aug 12 2016 00:00:00 GMT+0800 (中國標準時間)
console.log(+new Date(2016,7,12));//1470931200000
console.log(typeof new Date(2016,7,12));//'object'
console.log(Date.UTC(2016,7,12));//1470960000000
console.log(typeof Date.UTC(2016,7,12));//'number'

註意：使用參數類似於Date.parse()函數的方法時，如果日期對象超出範圍，瀏覽器會自動將日期計算成範圍內的值；使用參數類似於Date.UTC()函數的方法時，如果日期對象超出範圍，瀏覽器會提示Invalid Date

console.log(new Date(2016,7,32));//Thu Sep 01 2016 00:00:00 GMT+0800 (中國標準時間)
console.log(new Date(2016,8,1));//Thu Sep 01 2016 00:00:00 GMT+0800 (中國標準時間)
console.log(new Date('2016-8-32'));//Invalid Date
console.log(new Date('2016-9-1'));//Thu Sep 01 2016 00:00:00 GMT+0800 (中國標準時間)

實例方法

Date對象沒有可以直接讀寫的屬性，所有對日期和時間的訪問都需要通過方法。Date對象的大多數方法分為兩種形式：一種是使用本地時間，一種是使用UTC時間，這些方法在下面一起列出。例如，get[UTC]Day()同時代表getDay()和getUTCDay()。

Date對象一共有46個實例方法，可以分為以下3類：to類、get類、set類。

to類

to類方法從Date對象返回一個字符串，表示指定的時間

toString()

??返回本地時區的日期字符串

toUTCString()

??返回UTC時間的日期字符串

toISOString()

??返回Date對象的標準的日期時間字符串格式的字符串

toDateString()

??返回Date對象的日期部分的字符串

toTimeString()

??返回Date對象的時間部分的字符串

toJSON()

??返回一個符合JSON格式的日期字符串，與toISOString方法的返回結果完全相同

console.log(new Date('2016-7-12').toString());//Tue Jul 12 2016 00:00:00 GMT+0800 (中國標準時間)
console.log(new Date('2016-7-12').toUTCString());//Mon, 11 Jul 2016 16:00:00 GMT
console.log(new Date('2016-7-12').toISOString());//2016-07-11T16:00:00.000Z
console.log(new Date('2016-7-12').toDateString());//Tue Jul 12 2016
console.log(new Date('2016-7-12').toTimeString());//00:00:00 GMT+0800 (中國標準時間)
console.log(new Date('2016-7-12').toJSON());//2016-07-11T16:00:00.000Z

toLocaleString()

??toString()方法的本地化轉換

toLocaleTimeString()

??toTimeString()方法的本地化轉換

toLocaleDateString()

??toDateString()方法的本地化轉換

console.log(new Date('2016-7-12').toString());//Tue Jul 12 2016 00:00:00 GMT+0800 (中國標準時間)
console.log(new Date('2016-7-12').toLocaleString());//2016/7/12 上午12:00:00
console.log(new Date('2016-7-12').toDateString());//Tue Jul 12 2016
console.log(new Date('2016-7-12').toLocaleDateString());//2016/7/12
console.log(new Date('2016-7-12').toTimeString());//00:00:00 GMT+0800 (中國標準時間)
console.log(new Date('2016-7-12').toLocaleTimeString());//上午12:00:00

get類

Date對象提供了一系列get類方法，用來獲取實例對象某個方面的值

在介紹get類方法之前，首先要介紹valueOf()方法。

valueOf()

??返回距離1970年1月1日0點的毫秒數

??因此，可以方便地使用比較運算符來比較日期值

var date1 = new Date(2007,0,1);
var date2 = new Date(2007,1,1);
console.log(date1 > date2);//false
console.log(date1 < date2);//true

getTime()

??返回距離1970年1月1日0點的毫秒數，同valueOf()

??在ECMAScript5之前，可以使用getTime()方法實現Date.now()

Date.now = function(){
        return (new Date()).getTime()
    }

getTimezoneOffset()

??返回當前時間與UTC的時區差異，以分鐘表示(8*60=480分鐘)，返回結果考慮到了夏令時因素

console.log(new Date('2016-7-12').valueOf());//1468252800000
console.log(new Date('2016-7-12').getTime());//1468252800000
console.log(new Date('2016-7-12').getTimezoneOffset());//-480

getYear()

??返回距離1900年的年數(已過時)

get[UTC]FullYear()

??返回年份(4位數)

get[UTC]Month()

??返回月份(0-11)

get[UTC]Date()

??返回第幾天(1-31)

get[UTC]Day()

??返回星期幾(0-6)

get[UTC]Hours()

??返回小時值(0-23)

get[UTC]Minutes()

??返回分鐘值(0-59)

get[UTC]Seconds()

??返回秒值(0-59)

get[UTC]Milliseconds()

??返回毫秒值(0-999)

??註意：通過標準日期時間格式字符串，且有前置0的形式的參數設置，設置的是UTC時間

console.log(new Date('2016-07-12T10:00').getYear());//116
console.log(new Date('2016-07-12T10:00').getFullYear());//2016
console.log(new Date('2016-07-12T10:00').getUTCFullYear());//2016
console.log(new Date('2016-07-12T10:00').getMonth());//6
console.log(new Date('2016-07-12T10:00').getUTCMonth());//6
console.log(new Date('2016-07-12T10:00').getDate());//12
console.log(new Date('2016-07-12T10:00').getUTCDate());//12
console.log(new Date('2016-07-12T10:00').getDay());//2
console.log(new Date('2016-07-12T10:00').getUTCDay());//2
console.log(new Date('2016-07-12T10:00').getHours());//18
console.log(new Date('2016-07-12T10:00').getUTCHours());//10
console.log(new Date('2016-07-12T10:00').getMinutes());//0
console.log(new Date('2016-07-12T10:00').getUTCMinutes());//0
console.log(new Date('2016-07-12T10:00').getSeconds());//0
console.log(new Date('2016-07-12T10:00').getUTCSeconds());//0
console.log(new Date('2016-07-12T10:00').getMilliseconds());//0
console.log(new Date('2016-07-12T10:00').getUTCMilliseconds());//0

//當前時間為16:35
console.log(new Date().getHours());//16
console.log(new Date().getUTCHours());//8

set類

Date對象提供了一系列set類方法，用來設置實例對象的各個方面

set方法基本與get方法相對應，set方法傳入類似於Date.UTC()的參數，返回調整後的日期的內部毫秒數

註意：星期只能獲取，不能設置

setTime()

??使用毫秒的格式，設置一個Date對象的值

var d = new Date('2016-07-12T10:00');
console.log(d.setTime(86400000),d);//86400000 Fri Jan 02 1970 08:00:00 GMT+0800 (中國標準時間)

set[UTC]FullYear()

??設置年份(4位數)，以及可選的月份值和日期值

set[UTC]Month()

??設置月份(0-11)，以及可選的日期值

set[UTC]Date()

??設置第幾天(1-31)

var d = new Date('2016-07-12T10:00');
console.log(d.setFullYear(2015,1,1),d.getFullYear());//1422784800000 2015
console.log(d.setMonth(2),d.getMonth());//1425204000000 2
console.log(d.setDate(20),d.getDate());//1426845600000 20
console.log(d.toLocaleString());//2015/3/20 下午6:00:00

set[UTC]Hours()

??設置小時值(0-23)，以及可選的分鐘值、秒值及毫秒值

set[UTC]Minutes()

??設置分鐘值(0-59)，以及可選的秒值及毫秒值

set[UTC]Seconds()

??設置秒值(0-59)，以及可選的毫秒值

set[UTC]Milliseconds()

??設置毫秒值(0-999)

var d = new Date('2016-07-12T10:20:30');
console.log(d.setHours(1,2,3),d.getHours());//1468256523000 1
console.log(d.setMinutes(2,3),d.getMinutes());//1468256523000 2
console.log(d.setSeconds(3),d.getSeconds());//1468256523000 3
console.log(d.toLocaleTimeString())//上午1:02:03

var d = new Date('2016-07-12T10:20:30');
console.log(d.setUTCHours(1,2,3),d.getHours());//1468285323000  9
console.log(d.setUTCMinutes(2,3),d.getMinutes());//1468285323000  2
console.log(d.setUTCSeconds(3),d.getSeconds());//1468285323000  3
console.log(d.toLocaleTimeString())//上午9:02:03

思考題

用戶輸入具體時間，然後點擊開始後，頁面顯示倒計時信息
用代碼實現電子時鐘

JavaScript基礎入門06

string amp one 子午線 tle ber ril 日期字符串 rst 目錄 JavaScript 基礎入門06 Math 對象 Math對象的靜態屬性 Math

JavaScript基礎入門06

JavaScript 基礎入門06

Math 對象

Math對象的靜態屬性

Math對象的靜態方法

指定範圍的隨機數

返回隨機字符

三角函數

Date對象

基礎知識

標準時間

GMT

UTC

日期時間格式

閏年

月 和 日

星期

時分秒

日期對象具體API

靜態方法

Date.now()

Date.parse()

Date.UTC()

構造函數

第一種使用方式

第二種使用方式

第三種使用方式

第四種使用方式

第五種使用方式

實例方法

to類

get類

set類

思考題

相關推薦

月和日