在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://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的一些处理就说这么多,其实还有很多玩法,大家可以去研究下咯,如果您有任何问题可以加群或者留言。
网友评论文明上网理性发言 已有0人参与
发表评论: