JavaScript基础入门06

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

思考题

1. 用户输入具体时间，然后点击开始后，页面显示倒计时信息
2. 用代码实现电子时钟