在日期和时间这一块的学习中发现,其实和其他大部分的高级语言中时间和日期的操作差不多,没什么特别的,但是要注意的就是 ECMAScript中规定的一些方法在各大浏览器中的实现方式是不一样的,也就是说存在浏览器的不兼容问题,练习中主要是用的IE10,很少测试其他浏览器,故后面的练习结果都是基于IE9浏览器的结果,其他浏览器的结果可能不一

1、Date 类型
   ECMAScript中的Date类型使用的是UTC(世界统一时间)1970年1月1日零时开始进过的毫秒来保存的时间与日期。

  创建一个Date对象和创建一个Object对象差不多,通过new关键字和构造函数来创建的。如果创建的时候没有传递参数,那么默认的获取的是本地的当前时间

  ECMAScript提供了两个静态方法 Date.parse()和Date.UTC();都是接受参数返回毫秒

  Date.parse()中接收的是表示日期的字符串,一般常用的格式都可以,年月日/日月年(谷歌浏览器中不支持此种写法),如果没有给出时间就默认的是0,如'2013-01-13 12:34:24';当然也包含英文写法,'英文月名 日, 年',如 May 25, 2004;.'英文星期几 英文月名 日 年 时:分:秒 时区', 如 'Tue May 25 2004 00:00:00 GMT-070';如果不满足上面的一些要求就会返回一个NaN

  Eg:alert(Date.parse('6/13/2011')); //1307894400000

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

  如果输入的参数不正确就会返回NaN或者是负数等非法信息 Date.UTC('2012-12');

  由于创建日期的时候是可以传递一个参数的,故需要输出指定的日期的时候,将上面两个方法的返回值传递给Date()的构造函数即可,new Date(Date.parse('2014/01/02'));new Date(Date.UTC());当然对于Date.parse()可以直接传递复合个数的数值字符串给Date构造函数,因为系统会自动的调用Date.parse()函数,eg:new Date('2014-01-02');

2、通用的方法:   toString()(返回UTC格式时间),  toLocaleString()(返回本地格式),  valueOf()(返回毫秒数)

 3、日期格式化方法

  

  1. toDateString() //以特定的格式显示星期几、月、日和年
  2. toTimeString() //以特定的格式显示时分秒和时区
  3. toLocaleDateString() //以特定本地区格式显示日期
  4. toLocaleTimeString() //以特定的本地区格式显示时间和时区
  5. toUTCString() //以特定格式显示UTC日期

4、组件方法(重要)   下面的set方法是设置时间变量中的某一部分值,get方法是获取值

  1. box.getTime() //获取日期的毫秒数,和valueOf的返回值是一样的
  2. box.setTime(100) //一毫秒数来设置时间,会改变整个日期,因为日期是以毫秒数保存的
  3. box.getYear() //获取的是当前年份相对与1900的间隔时间
  4. box.setYear(114) //以间隔时间来设置年份,
  5. box.getFullYear() //获取日期中的四位年份部分,返回的是当前年如:2014
  6. box.setFullYear(2014) //设置四位年份部分,返回的是毫秒数
  7. box.getMonth() //获取月份,如果没有指定月份,则从0开始算起(0表示一月份)
  8. box.setMonth(11) //设置月份,11表示的是第十二月份
  9. box.getDate() //获取的是当前的日期
  10. box.setDate(23) //设置日期,返回的是毫秒数
  11. box.getDay() //获取的是当前时间中的星期几,0表示星期1,6表示星期6
  12. box.setDay(2) //设置星期几
  13. box.getHours() //获取当前日期中的时间部分
  14. box.setHours(12) //返回时,24小时制
  15. box.getMinutes() //获取当前日期中的分钟部分
  16. box.setMinutes(22) //设置分钟
  17. box.getSeconds() //获取秒钟
  18. box.setSeconds(23) //设置秒钟
  19. box.getMillseconds() //获取毫秒数
  20. box.setMillseconds(233) //设置毫秒数
  21. box.getTimezoneOffset() //返回本地时间和UTC时间相差的分钟

  注:上面的方法中除了最后一个方法 box.setTimezoneOffset()以外,其他的方法都具有UTC功能,以便和世界时间相协调,如:setDate()和getDate()对应的UTC方法是setUTCDate()和getUTCDate()

练习代码:

  1. /*
  2.  
  3. //创建一个日期类的对象,通过构造方法,此处没有传递参数,获取的是本的时间(浏览器各异)
  4. var time=new Date();
  5. alert(time);//Thu Jan 02 2014 15:06:46 GMT+0800 (China Standard Time)
  6.  
  7. // Date.parse() 和 Date.UTC() 是Date类型提供的两个静态方法。不需要创建对象的
  8. //Date.parse() 返回指定日期的毫秒数,指定日期有三种格式,不符合格式会返回NaN
  9. // 字符串括起来的日月年 '4/3/2013';
  10. var box=Date.parse('15/01/2013');
  11. alert(box);//1393603200000
  12. var age=Date.parse('15-01-2013');
  13. alert(age);//1393603200000
  14. var time=Date.parse('2013-01-15');
  15. alert(time);//1358208000000
  16. alert(Date.parse('2013-15-01'));//NaN
  17.  
  18. //'英文月 日,年'
  19. var time=Date.parse('May 25,2013');
  20. alert(time);//1369411200000
  21. time=Date.parse('May,25,2013');
  22. alert(time);//1369411200000
  23. var ti=Date.parse('25,May,2013');
  24. alert(ti);//1369411200000
  25. var t=Date.parse('2013,May,25');
  26. alert(t);//1369411200000
  27. var box=Date.parse('2013,25,May');
  28. alert(box);//1369411200000
  29. var age=Date.parse('2013-May-25');
  30. alert(age);//NaN
  31.  
  32. //'英文星期几 英文月名 日 年 时:分:秒 时区', 如 Tue May 25 2004 00:00:00 GMT-070
  33. alert(Date.parse('Tue May 25 2004 00:00:00 GMT-070'));//1085447400000
  34.  
  35. //如果想输出具体的日期和时间,可以把值传入 Data 的构造函数里面
  36. var box=new Date(Date.parse('15-01-2013'));
  37. alert(box);//Sat Mar 01 2014 00:00:00 GMT+0800 (China Standard Time)
  38.  
  39. //可以不用写 Date.parse() 而是直接传入一个符合上面三种格式的日期,
  40. //系统会自动的调用 Date.parse()方法
  41. var box=new Date('15-01-2013');
  42. alert(box);//Sat Mar 01 2014 00:00:00 GMT+0800 (China Standard Time)
  43.  
  44. //Date 对象及其在不同浏览器中的实现有许多奇怪的行为。其中有一种倾向是将超
  45. //出的范围的值替换成当前的值,以便生成输出。例如,在解析“January 32, 2007”时,有的
  46. //浏览器会讲其解释为“February 1, 2007” 。而 Opera 则倾向与插入当前月份的当前日期
  47. var box=new Date('January 32, 2007');
  48. alert(box);//Thu Feb 01 2007 00:00:00 GMT+0800 (China Standard Time)
  49.  
  50. //UTC 是国际统一时间 我国为东八区,故UTC时间加上8小时为本地时间
  51. //Date.UTC()方法同样也返回表示日期的毫秒数, 但它与 Date.parse()在构建值时使用不同
  52. //的信息。 (年份, 基于 0 的月份[0 表示 1 月, 1 表示 2 月], 月中的哪一天[1-31], 小时数[0-23],
  53. //分钟,秒以及毫秒)。只有前两个参数是必须的。如果没有提供月数,则天数为 1;如果省
  54. //略其他参数,则统统为 0.
  55.  
  56. alert(Date.UTC(2013,12));//1388534400000
  57. //如果输入非法值 则会返回负数或者 NaN
  58. alert(Date.UTC('2013,13'));//NaN
  59. //同样将返回值传入到 Date的构造函数中就可以输出具体的值
  60. alert(new Date(Date.UTC(2011,11,5,15,13,16)));
  61. //Mon Dec 05 2011 23:13:16 GMT+0800 (China Standard Time)
  62.  
  63. */
  64.  
  65. /* 通用方法 toString()(UTC格式) toLocaleString()(本地格式) valueOf()(返回的是毫秒数)
  66. var box=new Date(Date.UTC(2011,11,5,15,13,16));
  67. alert(box);//Mon Dec 05 2011 23:13:16 GMT+0800 (China Standard Time)
  68. alert(box.toString());//Mon Dec 05 2011 23:13:16 GMT+0800 (China Standard Time)
  69. alert(box.toLocaleString());//‎2011‎-‎12‎-‎05‎ ‎23‎:‎13‎:‎16
  70. alert(box.valueOf());//返回的是毫秒数 1323097996000
  71.  
  72. */
  73.  
  74. /* 序列化方法 都是按照特定的格式显示
  75. var box =new Date();
  76. alert(box);//Thu Jan 02 2014 17:18:58 GMT+0800 (China Standard Time)
  77. alert(box.toDateString());//Thu Jan 02 2014
  78. alert(box.toTimeString());//17:18:58 GMT+0800 (China Standard Time)
  79. alert(box.toLocaleDateString());//2014‎-‎01‎-‎02‎
  80. alert(box.toLocaleTimeString());//17:18:30
  81. alert(box.toUTCString());//以特定的格式显示完整的UTC时间 Thu, 02 Jan 2014 09:21:54 GMT
  82.  
  83. */
  84.  
  85. /* 组件方法 获取年月日时分秒星期等等等等
  86.  
  87. var box=new Date();
  88. alert(box.getYear());//114 获取的是相对于1900年的年份间隔
  89. alert(box.getTime());//1388654969210 返回的是毫秒数 和valueOf()返回的值是一样的
  90. alert(box.getDate());//2
  91. alert(box.getFullYear());//2014
  92. alert(box.getMonth());//0 // 0 代表的是一月
  93. alert(box.getDay());//4 星期几
  94. alert(box.getHours());// 17 返回的是本地的小时
  95. alert(box.getMinutes());//30 返回的是分钟数
  96. alert(box.getSeconds());//48 返回的是秒
  97. alert(box.getMilliseconds());//884 返回的是毫秒数
  98.  
  99. alert(box.getTimezoneOffset());// -480 返回的是本地时间和UTC时间相差的分钟数
  100.  
  101. */

JS 学习笔记--6---日期和时间的更多相关文章

  1. js学习笔记之日期倒计时(天,时,分,秒)

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. js学习笔记之日期倒计时DOM操作

    1.访问html元素 getElementById() 方法  返回对拥有指定 id 的第一个对象的引用,只有dom对象有效 getElementsByName() 方法  返回指定名称的对象集合 g ...

  3. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  4. java学习笔记之日期日历类

    java学习笔记之日期日历 Date日期类概述: 表示特定的瞬间,精确到毫秒 Date类的构造方法: 1.空参数构造方法 Date date = new Date(); 获取到当前操作系统中的时间和日 ...

  5. 一点感悟:《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

  6. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  7. Node.js学习笔记(2):基本模块

    Node.js学习笔记(2):基本模块 模块 引入模块 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式.在No ...

  8. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  9. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. Retrieve Only First x Rows

    From time to time you may have the need to grab the top X number of rows returned from a table. For ...

  2. 魅族MX3问题集锦

    我第一台智能机已经服役2年半了,已经满足不了现在日益庞大的APP,所以打算让他光荣退役.我觉得IPhone仍然是目前做的最好的手机,但是对于我来说好像没什么必要,尤其那土豪般的价格.而且我平时看视频居 ...

  3. Android图表

    最近需要用到Android里面的折现图,因此在这方面也去做了一些调研.总体发现Android对报表的支持还是非常好的.总体上去研究了两个实现方案,一个是利用Android提供的的AChartEngin ...

  4. xml文件对应的DTD学习

    DTD文件: 1.DTD文档主要由(元素,属性,实体,PCDATA,CDATA) 2.声明一个元素:<!ELEMENT 元素名称 (元素内容)> eg: <!ELEMENT pers ...

  5. STM32F0_新建软件工程详细过程

    前言 由于ST公司推出比STM32F1性价比更高的F0芯片,现在市面上F0芯片的占有率也非常高.F0芯片属于M0内核,主频48M(当然,可以超频的,但尽量不要超的太多),资源大小可根据项目需求来选型. ...

  6. 第三章 设计程序架构 之 设计实现Windows Azure 角色生命周期

    1. 概述 Windows Azure 是微软的云计算平台.用于 在微软数据中心 通过全局网络 生成.发布和管理应用程序. 本章内容包括 startup tasks 以及  实现 Start, Run ...

  7. Redhat 6环境下安装Oracle 12c的方法

    Step 1: 要在Linux上安装Oracle,需要在安装Oracle之前安装好相应的软件包,在不同操作系统环境下,对软件包的要求各不相同.具体对应的软件包,见官网文档:https://docs.o ...

  8. hdu1007

    Have you ever played quoit in a playground? Quoit is a game in which flat rings are pitched at some ...

  9. entityFramework使用 codefirst

    新建项目 用nuget安装entityFramework,Install-Package Entityframework 建一个model和context //[Table("Custome ...

  10. oracle expdp impdp

    一.不管导入还有导出都要先创建目录 1.创建目录 create directory my_dir as 'd:\yth';--生成目录(必须在指定位置先创建文件夹,名称最好与用户名一致) yth:是目 ...