[关闭]
@lxjwlt 2016-01-04T17:09:51.000000Z 字数 1824 阅读 907

Date小小技巧

未分类


首先回顾一下Date的基本用法。

创建Date对象

Date构造函数可以创建当前时间的Date对象,也可以根据任意指定时间创建相应的Date对象:

  1. // 当前时间的Date对象
  2. var today = new Date(),
  3. // 2014年1月1日 的Date对象
  4. time1 = new Date(2014, 0, 1),
  5. // 通过getTime,将time1对象转化为数值
  6. // 将该数值传入Date构造函数中,同样能创建 2014年1月1日 的Date对象
  7. // 所以getTime方法可用于数据传输
  8. time2 = new Date(time1.getTime());

常用方法

以下是Date对象常用方法,注意返回值的范围(特别要注意月份,月份的取值为[0 - 11]):

  1. var time = new Date();
  2. time.getTime(); // 将时间转换成数值形式,一般用于数据传输
  3. time.getFullYear(); // 获取年份
  4. time.getMonth(); // 获取月份 [0 - 11]
  5. time.getDate(); // 获取月份中的日子 [1 - ?]
  6. time.getDay(); // 获取一周中的日子 [0 - 6],0表示星期天
  7. time.getHours(); // 获取时 [0 - 23]
  8. time.getMinutes(); // 获取分 [0 - 59]
  9. time.getSeconds(); // 获取秒 [0 - 59]

如何‘计算’某年某月的总天数?

首先我们知道,月份的总天数可以通过一些闰年神马神马的法则计算出来,但这无疑将问题复杂化了。实际上,计算机本身就是一个万年历,想想看,如果我们手中有一个万年历,我们会怎么做呢?还会去做那些繁琐的计算?不,我们会先翻日历找到那个月份,接着找到当前月份的最后一天,这一天的日期就是该月的总天数。很好,现在问题是:如何找到某个月的最后一天?

还记得上面介绍“创建Date对象”吗?如果我们想创建 2014年1月1日 的Date对象,可以这样写:

  1. var time = new Date(2014, 0, 1);

我们知道,Date构造函数中传入了三个参数,分别是年、月、日。但是,如果“日”的参数为0会怎么样呢?由于0在1之前,所以意味着2014年1月1日的前一天,即2013年12月的最后一天

  1. // 2013年12月的最后一天
  2. var time = new Date(2014, 0, 0);
  3. // 通过getDate方法获得日期
  4. // 2013年12月的最后一天是31日,说明2013年12月份有31天
  5. time.getDate();

通过这个小小技巧,我们能够获取任意月份的总天数了!

格式化

关于时间输出格式,Date对象没有对应方法,非常遗憾!但是我们可以自己封装一个方法来实现这一点,下面是简易代码:

  1. Date.prototype.format = function(str) {
  2. var monthName = [
  3. 'January', 'February', 'March',
  4. 'April', 'May', 'June',
  5. 'July', 'Aguest', 'September',
  6. 'October', 'November', 'December'
  7. ],
  8. year = this.getFullYear(),
  9. month = this.getMonth(),
  10. day = this.getDate();
  11. // 替换字符串中的'y' 'm' 'd'字符
  12. return str.replace(/(y+)/g, year)
  13. .replace(/m+(\s+)/g, monthName[month] + '$1')
  14. .replace(/m+(\S+)/g, (month + 1) + '$1')
  15. .replace(/d+/g, day);
  16. };
  17. var time = new Date(2014, 6, 3);
  18. time.format('y年m月d日'); // "2014年7月3日"
  19. time.format('y-m-d'); // "2014-7-3 "
  20. time.format('m y'); // "July 2014"

当然啦,直接修改原型链是bad design,上面只起说明作用。

最后

了解了这些Date的常见用法,我们可以制作出类似Windows系统日历的效果:

通过链接访问该DEMO

上述代码主要是向6行乘7列的格子中填入日期。这过程中,我们需要知道临近两个月的信息:上个月的最后一天的日期和这个月的总天数。前面提到的小技巧正好能派上用场。

参考

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注