通过实例解析javascript Date对象属性及方法


Posted in Javascript onNovember 04, 2020

日常生活中,各种形式的时间字符到处都是。时间观念的产生,时间单位、计时工具的发明,给人类带来的变化实在一言难尽。今天就来谈谈日期那些事儿。一起来看看 JavaScript 中的日期对象 Date。

获取月份天数

// 获取月份天数
function getMonthDayCount(year, month) {
 return new Date(year, month, 0).getDate();
}
console.log(getMonthDayCount(2017, 10)); // 31

Date 第三个参数的本质跟 setDate 是一样的。

因为 date 为 0 时自动退到上个月的最后一天,所以这里月份也不需要减,正好的。

获取所有月份天数

function getAllMonthDayCount(year) {
 var days = [31, new Date(year, 2, 0).getDate(), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 return days;
}
console.log(getAllMonthDayCount(2016));// [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

这个算是上面的延伸,不多解释。

是否是闰年

function isLeapYear(year) {
 return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);
}

这是网上的web前端开发里相关代码,相信大多数人都用。但其实你真的理解或者能记住么?光是html和css就足够多记的了

function isLeapYear(year) {
 return new Date(year, 2, 0).getDate() === 29;
}
console.log([
 isLeapYear(2000),
 isLeapYear(2016),
 isLeapYear(2017),
 isLeapYear(2018)
]); // [ true, true, false, false ]

这样看,是不是就非常简单容易理解了。

而且都不需要记,是不是想忘都忘不了?

天数加减操作

之前看到有人用相对秒数在计算几天前或几天后,甚至还在算跨月,跨年的情况。

其实直接 setDate 就好了,自动处理 跨月,跨年 的情况。

// 10天后是几月几号
var dt = new Date('2016-12-25');
dt.setDate(dt.getDate() + 10);
console.log(dt.toLocaleDateString()); // 2017/1/4

// 10天前是几月几号
var dt = new Date('2017-01-04');
dt.setDate(dt.getDate() - 10);
console.log(dt.toLocaleDateString()); // 2016/12/25

下面我将JavaScript Date 对象的对象和方法总结成一个表,让大家参考,也可以关注javascript参考手册。

Date 对象属性

属性 描述
constructor 返回对创建此对象的 Date 函数的引用。
prototype 使您有能力向对象添加属性和方法。

Date 对象方法

方法 描述
Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
etMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份(四位数字)。
setYear() 请使用 setFullYear() 方法代替。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 以毫秒设置 Date 对象。
setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear() 根据世界时设置 Date 对象中的年份(四位数字)。
setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource() 返回该对象的源代码。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toDateString() 把 Date 对象的日期部分转换为字符串。
toGMTString() 请使用 toUTCString() 方法代替。
toUTCString() 根据世界时,把 Date 对象转换为字符串。
toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串。
toLocaleTimeString() 根据本地时间格式,把 Date 对象的时间部分转换为字符串。
toLocaleDateString() 根据本地时间格式,把 Date 对象的日期部分转换为字符串。
UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf() 返回 Date 对象的原始值。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 #Javascript
解决vant-UI库修改样式无效的问题
Nov 03 #Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 #Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 #Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 #Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 #Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 #Javascript
You might like
文本加密解密
2006/06/23 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
印尼网上商店:Alfacart.com
2019/03/11 全球购物
科室工作个人总结的自我评价
2013/10/29 职场文书
大学生实习感言
2014/01/16 职场文书
质量承诺书范文
2014/03/27 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
入股协议书范本
2014/11/01 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL