51工具盒子
在Web前端开发项目过程中，对于日期的一些处理，已经很常见了，比如获取当前地区日期、日期格式转换、时间倒计时，模拟钟表等功能。都会用到日期Date一些属性方法，接下来我们简单聊聊吧。
首先我们必须熟悉Date的定义和一些属性
了解Date
Date 对象用于处理日期与时间。
创建 Date 对象： new Date()
以下四种方法同样可以创建 Date 对象：
var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
Date 对象属性
| 属性 | 描述 | |:------------|:----------------------| | constructor | 返回对创建此对象的 Date 函数的引用。 | | prototype | 使您有能力向对象添加属性和方法。 |
Date 对象方法
Date可以使用很多方法，在这里不多说，直接列表走一波。
| 方法 | 描述 |
|:---------------------|:-----------------------------------------------------------------------------------------------|
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
| getFullYear() | 从 Date 对象以四位数字返回年份。 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
| getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
| getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
| getTimezoneOffset() | 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 |
| getUTCDate() | 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 |
| getUTCDay() | 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 |
| getUTCFullYear() | 根据世界时从 Date 对象返回四位数的年份。 |
| getUTCHours() | 根据世界时返回 Date 对象的小时 (0 ~ 23)。 |
| getUTCMilliseconds() | 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 |
| getUTCMinutes() | 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 |
| getUTCMonth() | 根据世界时从 Date 对象返回月份 (0 ~ 11)。 |
| getUTCSeconds() | 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 |
| getYear() | 已废弃。 请使用 getFullYear() 方法代替。 |
| parse() | 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。 |
| setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 |
| setFullYear() | 设置 Date 对象中的年份（四位数字）。 |
| setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 |
| setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 |
| setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 |
| setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 |
| setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 |
| setTime() | setTime() 方法以毫秒设置 Date 对象。 |
| setUTCDate() | 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 |
| setUTCFullYear() | 根据世界时设置 Date 对象中的年份（四位数字）。 |
| setUTCHours() | 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 |
| setUTCMilliseconds() | 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 |
| setUTCMinutes() | 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 |
| setUTCMonth() | 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 |
| setUTCSeconds() | setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。 |
| setYear() | 已废弃。请使用 setFullYear() 方法代替。 |
| toDateString() | 把 Date 对象的日期部分转换为字符串。 |
| toGMTString() | 已废弃。请使用 toUTCString() 方法代替。 |
| toISOString() | 使用 ISO 标准返回字符串的日期格式。 |
| toJSON() | 以 JSON 数据格式返回日期字符串。 |
| toLocaleDateString() | 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 |
| toLocaleTimeString() | 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 |
| toLocaleString() | 根据本地时间格式，把 Date 对象转换为字符串。 |
| toString() | 把 Date 对象转换为字符串。 |
| toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
| toUTCString() | 根据世界时，把 Date 对象转换为字符串。 实例： var today = new Date();var UTCstring = today.toUTCString(); |
| UTC() | 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 |
| valueOf() | 返回 Date 对象的原始值。 |
了解完上面内容，我们一起来看下实例
实例1 - 获取时间
下面是关于获取时间的几个小例子：
//本月有多少天
var oDate=new Date();
oDate.setMonth(oDate.getMonth()+1);
oDate.setDate(0);
alert(oDate.getDate());
//本月第一天是周几
ar oDate=new Date();
oDate.setDate(1);
alert(oDate.getDay())
//本月最后一天是周几
var oDate=new Date();
oDate.setMonth(oDate.getMonth()+1);
oDate.setDate(0);
alert(oDate.getDay());
实例2 - 实现倒计时功能
这个功能比较常见，比如我们在开发活动页面的时候，就会用到活动截止之前的倒计时显示效果，废话不多说，上DEMO。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现倒计时功能 - Web前端之家https://www.jiangweishan.com/</title>
<style>
div{
width: 500px;
margin: 200px 400px;
font-size: 30px;
font-family: 新宋体;
text-align: center;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
var oDay=new Date('2020/8/1');//获取标准的时间
var oTime=new Date();
var oJu=parseInt((oDay.getTime()-oTime.getTime())/1000);//获取1970年1月1日到五一总共有多少秒
var Day=parseInt(oJu/86400);//获取距离五一还有多少天
var yu=oJu%86400;
//获取剩下的时分秒
var h=parseInt(yu/3600);
var m=parseInt(yu%3600/60);
var s=yu%3600%60;
var oDiv=document.getElementsByTagName('div')[0];
//设置字符串拼接的变量
function toDub(n) {
if (n<10){return '0'+n}
else {return n}
}
oDiv.innerHTML=`距离五一长假放假时间<br>倒计时：${toDub(Day)}天${toDub(h)}时${toDub(m)}分${toDub(s)}秒`;
//设置一秒钟自动刷新一次页面
setTimeout(function () {
window.location.reload()
},1000);
</script>
</html>
说明：我们可以设置oDay属性为您的活动截止日期。
实例3 - 根据当前区域实现时钟效果
这个效果大家可以学下，其实就是一个手表功能。
function date(){
var date = new Date();
var ymd = date.getYear()+1900+"/"+(parseInt(date.getMonth())+1)+"/"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
document.getElementById("date").innerHTML = ymd;
setTimeout("date()",1000);
}
我们定义一个函数，然后循环，在HTML里调用显示：
<div id="date"></div>
最终效果就是类似这样的：
2020/07/22 13:10:11
实例4- 时间格式转换
这个功能，我们在处理API接口的时候经常用到，因为前台显示的时间格式往往跟后台给的API不同，有时候后台开发人员也不会帮你改的，所以这时候我们自己想办法去处理转换。这里介绍一个方法：format()。如何用呢？
new Date().format("YYYY-mm-dd")
这是一个很简单的例子。但是平常很多地方会用到，需要封装下咯。
Date.prototype.format = function(format)
{ var o = { "M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond } if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
(this.getFullYear()+"").substr(4 - RegExp.$1.length)); for(var k in o)if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length==1 ? o[k] :
("00"+ o[k]).substr((""+ o[k]).length)); return format;
}
然后调用此方法：
var d1 = new Date();
d1.format('yyyy-MM-dd');var d2 = new Date();
d2.format('yyyy-MM-dd');
说明：format()方法据说在es6已经被干掉了，要用的话，需要调用下第三方插件库，大家记住咯。
总结
对于Date的一些处理就说这么多，其实还有很多玩法，大家可以去研究下咯，如果您有任何问题可以加群或者留言。
