最近的项目需要实现一个时间表格的效果,如下图所示,每次更换第几周时也更新对应的日期。使用了Date类型,也踩了些坑。故写下此篇笔记。
Date类型
ECMAScript中的Date类型是在早期Java中的java.util.Date类基础上构建的。使用自UTC(1970
年1月1日零时)开始经过的毫秒数来保存日期
创建对象
-
获取当前时间
var d = new Date();//无参数时自动获得当前日期和时间
-
获取特定日期时间
-
Date.parse()
var someday = new Date(Date.parse("Jul 1 2016"));
-
Date.UTC()
var someday = new Date(Date.UTC(2016,6,1,22,06,15));
-
具体含义
Date.parse()接受一个表示日期的字符串参数,若不能表示日期则返回NaN。实际上如果我们直接将字符串传入构造函数,后台也会调用Date.parse()方法。可接受的日期格式包括:6/15/2016;July 12,2016;Fri, July 25 2016 00:00:00 GMT-0700(时区);2016-07-01T00:00:00【最后一种表示反射只有兼容ECMAScript5的支持】
Date.UTC()构造的参数分别是年份、基于0的月份(0-11)、月中的哪天(1-31),小时(0-23),分钟、秒、毫秒。其中年和月的参数是必需的,若没有提供后面的参数,则默认为第一天,0时0分0秒。
-
需要注意的是,不同浏览器对于日期的解释有所差异。调用Date.UTC()方法时,直接console.log()出来的结果是当地时间,而不是GMT时间。但实际上UTC返回的是GMT时间。而直接与UTC方法参数相同的值传入Date()构造函数,获取的日期对象都是基于系统设置的本地时间创建的。
调用方法时的日期和时间的毫秒数,时间戳
//使用Date.now()方法【IE9+,Firefox 3+,Safari 3+,Opera 10.5,Chrome】
var start = Date.now();//开始时间
doSomething();//调用函数
var end = Date.now();//停止时间
var result = end-start;//执行时间
//使用+获取Date对象的时间戳【运行有误?望了解的人能告知】
var start = +new Date();
doSomething();
var end = +new Date();
var result = end - start;
//使用valueOf()获取时间戳
var start = (new Date()).valueOf();
//使用parse()获取时间戳
var start = Date.parse(new Date());
日期格式化方法
-
toLocaleString()
;//"2016/7/1 下午11:01:45"
-
toString()
//"Fri Jul 01 2016 23:01:45 GMT+0800 (中国标准时间)"
-
toDateString()
//"Fri Jul 01 2016"
-
toTimeString()
//"23:01:45 GMT+0800 (中国标准时间)"
-
toLocaleDateString()
//"2016/7/1"
-
toLocaleTimeString()
//"下午11:01:45"
-
toUTCString()
//"Fri, 01 Jul 2016 15:01:45 GMT"
但这些方法中,输出也是因浏览器而异。以上显示均在Chrome控制台输出。
日期时间组件方法
这次项目中所用到的方法即是setDate()
方法,获取当天时间后,再利用setDate(today.getDate()+/-n)
去获取日期。setDate()
传入的参数若超过了该月中应有的天数,则增加月份。setDate()
的返回值是时间戳,不能直接用today.setDate(n).toLocaleDateString()
,而是应该在setDate(n)
后再调用today.toLocaleDateString()
;
除此之外,这次还牵扯到对象引用的问题。
var x = new Date();
var y = x;
console.log(x);//Sat Jul 02 2016 00:08:10 GMT+0800 (中国标准时间)
x.setDate(15);
console.log(x);//Fri Jul 15 2016 00:08:10 GMT+0800 (中国标准时间)
console.log("y",y);//y Fri Jul 15 2016 00:08:10 GMT+0800 (中国标准时间)
由上面的代码可以发现,y其实是x的引用,x发生变化时,y也随之改变。若想改变这种情况,可使用var y = new Date(x);
则y与x则不同。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。