JavaScript时间与日期

学习要点:

1.Date类型

2.通用的方法

3.格式化方法

4.组件方法

ECMAScript提供了Date类型来处理时间和日期。Date类型内置一系列获取和设置日期时间信息的方法。

一.Date类型

ECMAScript中的Date类型是在早期Java中java.util.Date类基础上构建的。为此,Date类型使用UTC (Coordinated Universal Time,国际协调时间[又称世界统一时间]) 1970年1月1日午夜(零时)开始经过的毫秒来保存日期。在使用这种数据存储格式的条件下,Date类型保存的日期能够精确到1970年1月1日之前或之后的285616年。

Date()创建一个日期对象,使用new运算符和Date构造方法(构造函数)即可

在调用Date构造方法而不传递参数的情况下,新建的对象自动获取当前的时间和日期。

var box = new Date();                    //创建一个日期对象
alert(box); //打印时间对象,返回Thu Nov 03 2016 14:56:21 GMT+0800
//不同浏览器显示不同

ECMAScript提供了两个方法,Date.parse()和Date.UTC()。Date.parse()方法接收一个表示日期的字符串参数,然后尝试根据这个字符串返回相应的毫秒数。ECMA-262没有定义Date.parse()应该支持哪种日期格式,因此方法的行为因实现而异,因地区而异。默认通常接收的日期格式如下:

Date.parse()方法接收一个表示日期的字符串参数,然后尝试根据这个字符串返回相应的毫秒数【有参传时间日期格式】

1.'月/日/年',如6/13/2011;

2.'英文月名 日, 年',如 May 25, 2004;

3.'英文星期几 英文月名 日 年 时:分:秒 时区',如 Tue May 25 2004 00:00:00 GMT-070

如果Date.parse()没有传入或者不是标准的日期格式,那么就会返回NaN。

var box = Date.parse('6/13/2011');                    //创建一个日期对象,调用parse方法,传入时间格式
alert(box); //打印时间对象,返回1307894400000,时间毫秒数

如果想输出指定的日期,那么把Date.parse()传入Date构造方法里。

var box1 = new Date(Date.parse('6/13/2011'));  //Date.parse获取指定时间的毫秒数,将毫秒数传参给Date()
alert(box1); //返回Mon Jun 13 2011 00:00:00 GMT+0800 var box2 = new Date('6/13/2011'); //直接传入指定时间,后台会自动调用Date.parse()方法
alert(box2); //返回Mon Jun 13 2011 00:00:00 GMT+0800

PS:Date对象及其在不同浏览器中的实现有许多奇怪的行为。其中有一种倾向是将超出的范围的值替换成当前的值,以便生成输出。例如,在解析“January 32, 2007”时,有的浏览器会讲其解释为“February 1, 2007”。而Opera则倾向与插入当前月份的当前日期。

Date.UTC()方法接收一个表示日期的字符串参数,返回相应的毫秒数

Date.UTC()方法同样也返回表示日期的毫秒数,但它与Date.parse()在构建值时使用不同的信息。(年份,基于0的月份[0表示1月,1表示2月],月中的哪一天[1-31],小时数[0-23],分钟,秒以及毫秒)。只有前两个参数是必须的。如果没有提供月数,则天数为1;如果省略其他参数,则统统为0.

var box = Date.UTC(2016,11); //必传参数年月
alert(box); //返回1480550400000

如果Date.UTC()参数传递错误,那么就会出现负值或者NaN等非法信息。

alert(Date.UTC());                        //负值或者NaN

如果要输出指定日期,那么直接把Date.UTC()传入Date构造方法里即可。

var box = new Date(Date.UTC(2011,11, 5, 15, 13, 16));   //Date.UTC获取到毫秒数,传给Date()
alert(box); //返回Mon Dec 05 2011 23:13:16 GMT+0800
var box = new Date(2011,11, 5, 15, 13, 16);   //直接传参给Date()【推荐】
alert(box); //返回Mon Dec 05 2011 15:13:16 GMT+0800

二.通用的方法

与其他类型一样,Date类型也重写了toLocaleString()、toString()和valueOf()方法;但这些方法返回值与其他类型中的方法不同。

toLocaleString()方法,格式:2016/11/3 下午4:21:03,浏览器有的显示不同

var box = new Date();   //获取系统当前时间
alert(box.toLocaleString()); //将当前时间格式化,2016/11/3 下午4:21:03,浏览器有的显示不同

toString()方法,格式:Thu Nov 03 2016 16:23:22 GMT+0800,返回国际时间格式

var box = new Date();   //获取系统当前时间
alert(box.toString()); //将当前时间格式化,Thu Nov 03 2016 16:23:22 GMT+0800,给直接Date()一样,说明默认调用了toString()方法

valueOf()方法,格式:1478162137197,返回毫秒数

var box = new Date();   //获取系统当前时间
alert(box.valueOf()); //将当前时间格式化,1478162137197,返回毫秒数

PS:这两个方法在不同浏览器显示的效果又不一样,但不用担心,这两个方法只是在调试比较有用,在显示时间和日期上,没什么价值。valueOf()方法显示毫秒数。

三.日期格式化方法

Date类型还有一些专门用于将日期格式化为字符串的方法

toDateString()以特定的格式显示星期几、月、日和年/Thu Nov 03 2016

toTimeString()以特定的格式显示时、分、秒和时区/16:45:47 GMT+0800

toLocaleDateString()以特定地区格式显示、月、日和年/2016/11/3

toLocaleTimeString()以特定地区格式显示时、分、秒和时区/下午4:49:03

toUTCString()以特定的格式显示完整的UTC日期。/Thu, 03 Nov 2016 08:49:53 GMT

var box = new Date();
alert(box.toDateString()); //以特定的格式显示星期几、月、日和年/Thu Nov 03 2016
alert(box.toTimeString()); //以特定的格式显示时、分、秒和时区/16:45:47 GMT+0800
alert(box.toLocaleDateString()); //以特定地区格式显示、月、日和年/2016/11/3
alert(box.toLocaleTimeString()); //以特定地区格式显示时、分、秒和时区/下午4:49:03
alert(box.toUTCString()); //以特定的格式显示完整的UTC日期。/Thu, 03 Nov 2016 08:49:53 GMT

四.组件方法

组件方法,是为我们单独获取你想要的各种时间/日期而提供的方法。需要注意的时候,这些方法中,有带UTC的,有不带UTC的。UTC日期指的是在没有时区偏差的情况下的日期值。

UTC的和不带UTC的相差8个小时

getTime()获取日期的毫秒数,和valueOf()返回一致/1478163539545

var box = new Date();
alert(box.getTime()); //获取日期的毫秒数,和valueOf()返回一致/1478163539545

setTime()以毫秒数设置日期,会改变整个日期/1478163539545

var box = new Date();
alert(box.setTime(1478163539545)); //以毫秒数设置日期,会改变整个日期/1478163539545

getFullYear()获取四位年份/2016

var box = new Date();
alert(box.getFullYear()); //获取四位年份/2016

setFullYear()设置四位年份,返回的是毫秒数

var box = new Date();
alert(box.setFullYear(2012)); //设置四位年份,返回的是毫秒数/1351935497504

getMonth()获取月份,没指定月份,从0开始算起/11

var box = new Date();
alert(box.getMonth()+1); //获取月份,没指定月份,从0开始算起/11

setMonth()设置月份/返回毫秒1480758520312

var box = new Date();
alert(box.setMonth(11)); //设置月份/返回毫秒1480758520312

getDate()获取日期3

var box = new Date();
alert(box.getDate()); //获取日期3

setDate()设置日期,返回毫秒数/1478598717254

var box = new Date();
alert(box.setDate(8)); //设置日期,返回毫秒数/1478598717254

getDay()返回星期几,0表示星期日,6表示星期六

var box = new Date();
alert(box.getDay()); //返回星期几,0表示星期日,6表示星期六

setDay()设置星期几返回毫秒数

var box = new Date();
alert(box.setDay()); //设置星期几

getHours()返回时18

var box = new Date();
alert(box.getHours()); //返回时18

setHours()设置时返回毫秒1478145765552

var box = new Date();
alert(box.setHours(12)); //设置时返回毫秒1478145765552

getMinutes()返回分钟/4

var box = new Date();
alert(box.getMinutes()); //返回分钟/4

setMinutes()设置分钟返回毫秒/1478168523941

var box = new Date();
alert(box.setMinutes(22)); //设置分钟返回毫秒/1478168523941

getSeconds()返回秒数

var box = new Date();
alert(box.getSeconds()); //返回秒数

setSeconds()设置秒数返回毫秒

var box = new Date();
alert(box.setSeconds(44)); //设置秒数返回毫秒

getMilliseconds()返回毫秒数

var box = new Date();
alert(box.getMilliseconds()); //返回毫秒数607

setMilliseconds()设置毫秒数

var box = new Date();
alert(box.setMilliseconds(123)); //设置毫秒数

getTimezoneOffset()返回本地时间和UTC时间相差的分钟数/-480

var box = new Date();
alert(box.getTimezoneOffset()); //返回本地时间和UTC时间相差的分钟数/-480

PS:以上方法除了getTimezoneOffset(),其他都具有UTC功能,例如setDate()及getDate()获取星期几,那么就会有setUTCDate()及getUTCDate()。表示世界协调时间。 

也就是除了getTimezoneOffset()外,其他方法都有UTC功能,UTC表示世界协调时间,与我们的时间相差8个小时 ,要使用UTC功能在方法里加上UTC即可  如:

var box = new Date();
alert(box.getUTCHours()); //获取UTC时间

用组件方式组合完整的时间【常用】

var box = new Date();
alert(box.getFullYear()+'-'+(box.getMonth()+1)+'-'+box.getDate()+' '+box.getHours()+':'+box.getMinutes()+':'+box.getSeconds());
//返回2016-11-3 18:40:22

第一百零四节,JavaScript时间与日期的更多相关文章

  1. “全栈2019”Java第一百零四章:匿名内部类与外部成员互访详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  2. 第四百零四节,python网站第三方登录,social-auth-app-django模块,

    第四百零四节,python网站第三方登录,social-auth-app-django模块, social-auth-app-django模块是专门用于Django的第三方登录OAuth2协议模块 目 ...

  3. 第一百零九节,JavaScript面向对象与原型

    JavaScript面向对象与原型 学习要点: 1.学习条件 2.创建对象 3.原型 4.继承 ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标 ...

  4. 第一百零七节,JavaScript基本包装类型,数据类型的方法

    JavaScript基本包装类型,数据类型的方法 学习要点: 1.基本包装类型概述 2.Boolean类型 3.Number类型 4.String类型 为了便于操作基本类型值,ECMAScript提供 ...

  5. 第一百零五节,JavaScript正则表达式

    JavaScript正则表达式 学习要点: 1.什么是正则表达式 2.创建正则表达式 3.获取控制 4.常用的正则 假设用户需要在HTML表单中填写姓名.地址.出生日期等.那么在将表单提交到服务器进一 ...

  6. 第一百零二节,JavaScript函数

    JavaScript函数 学习要点: 1.函数声明 2.return返回值 3.arguments对象 函数是定义一次但却可以调用或执行任意多次的一段JS代码.函数有时会有参数,即函数被调用时指定了值 ...

  7. 第一百零一节,JavaScript流程控制语句

    JavaScript流程控制语句 学习要点: 1.语句的定义 2.if 语句 3.switch语句 4.do...while语句 5.while语句 6.for语句 7.for...in语句 8.br ...

  8. 第一百零六节,JavaScript变量作用域及内存

    JavaScript变量作用域及内存 学习要点: 1.变量及作用域 2.内存问题 JavaScript的变量与其他语言的变量有很大区别.JavaScript变量是松散型的(不强制类型)本质,决定了它只 ...

  9. 第一百零三节,JavaScript对象和数组

    JavaScript对象和数组 学习要点: 1.Object类型 2.Array类型 3.对象中的方法 什么是对象,其实就是一种类型,即引用类型.而对象的值就是引用类型的实例.在ECMAScript中 ...

随机推荐

  1. 自己找到的一些比较实用比较好看的前端特效。很多是前面提供的jquery网站的

    http://www.cnblogs.com/zhangzongle/p/6034394.html webservicehttp://blog.csdn.net/wowkk/article/detai ...

  2. ShopNC_WAP

    记录 ShopNC_WAP 端点点滴滴 插件记录 1.  http://www.jiawin.com/swipe-mobile-touch-slider   swiper 插件 2. https:// ...

  3. trove datastore 浅析

    以下代码来自trove/datastore该目录下一共有4个文件__init__,views,models,service大概关系(主要是wsgi吧,没仔细学过,简单的从代码上做推测),service ...

  4. 【转】Oracle + PHP Cookbook(php oracle clob 长度超过4000如何写入)

      在甲骨文LOB和PHP工作 由哈里Fuecks 达到4,000字节的限制?输入LOB ... 在这个"Oracle + PHP Cookbook"HowTo中,您将学习可用的L ...

  5. js中substr,substring,indexOf,lastIndexOf等的用法

    1.substrsubstr(start,length)表示从start位置开始,截取length长度的字符串. var src="images/off_1.png";alert( ...

  6. python新手 实践操作 作业

    #有如下值集合 [11,22,33,44,55,66,77,88,99],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中.即: {'k1': 大于66的所 ...

  7. mysql分享记录

    今天公司进行了一次mysql的分享,做一下记录,也许很多东西很简单,但是对于不知道的人就很难 1.用最小代价存储 举个例子来说,如果能确定某个字段是存数字的,并且数字的大小一定不会超过127或255, ...

  8. Java动态解压zip压缩包

    import java.io.BufferedOutputStream; import java.io.File; import java.io.FileNotFoundException; impo ...

  9. PHP5.5在windows 安装使用 memcached 服务端的方法以及 php_memcache.dll 下载

    PHP5.5 在windows下安装 memcached 的方法 下载服务端资源 http://download.csdn.net/detail/zsjangel/7104727 下载完成后,解压(我 ...

  10. 第一百二十一节,JavaScript事件绑定及深入

    JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...