×

关于JS里处理日期(new Date】相关属性的方法总结

作者:Web前端之家2020.07.22来源:Web前端之家浏览:310评论:0
关键词:new Date()js
微信公众号

微信公众号

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前端之家http://www.miarww.com.cn/</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的一些处理就说这么多,其实还有很多玩法,大家可以去研究下咯,如果您有任何问题可以加群或者留言。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.miarww.com.cn/article/date20200722a2.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    点多...

  • kaifa8

    小公司很少会去搞这种开发自动化,都只是看重结果。...

  • 访客

    你可以加群去问...

  • 访客

    怎么注册?不会...

  • ajoy

    说法可以是一样的,毕竟JS和JQ都是有“血缘关系”的,你可以自己改下不就可以了吗,哈哈!...

  • 访客

    标题是JS用了JQ误人子弟呢...

  • absoy

    vue居然还能这么玩,期待你们vue3.0中文版教程。...

  • caij2

    github也中了新冠病毒了吧,哈哈!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright ? 2020 Web前端之家(www.miarww.com.cn) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.4 Valyria

时时彩平台哪个好 重庆百变王牌走势图百宝彩 快乐10分复式计算器 昆明股票配资 网上炒股 江西11选5组选走势图 pc蛋蛋怎么赚钱 东方6十丨走势图 云南快乐10分口诀任五 东方6十丨走势图 互联网投资理财排行 辽宁快乐12前三组走势图 速配资 深圳风采开奖结果玩法 跌停洗盘后暴涨的股 股票配资在线航必选卓信宝 甘肃快三今天的走势图解