JavaScript Date 对象详解及时间戳和日期格式转换方法

阳光穿透心脏的1/2处 2021-09-24 05:58 424阅读 0赞

# 1.Date 对象 #

Date 对象用于处理日期和时间。

### 创建 Date 对象的语法： ###

var myDate=new Date()

注释：Date 对象会自动把当前日期和时间保存为其初始值。

## Date 对象属性 ##

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_constructor_date.asp" rel="nofollow">constructor</a></td> 
   <td>返回对创建此对象的 Date 函数的引用。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_prototype_date.asp" rel="nofollow">prototype</a></td> 
   <td>使您有能力向对象添加属性和方法。</td> 
  </tr> 
 </tbody> 
</table>

## Date 对象方法 ##

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">Date()</a></td> 
   <td>返回当日的日期和时间。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getDate.asp" rel="nofollow">getDate()</a></td> 
   <td>从 Date 对象返回一个月中的某一天 (1 ~ 31)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getDay.asp" rel="nofollow">getDay()</a></td> 
   <td>从 Date 对象返回一周中的某一天 (0 ~ 6)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getMonth.asp" rel="nofollow">getMonth()</a></td> 
   <td>从 Date 对象返回月份 (0 ~ 11)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getFullYear.asp" rel="nofollow">getFullYear()</a></td> 
   <td>从 Date 对象以四位数字返回年份。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getYear.asp" rel="nofollow">getYear()</a></td> 
   <td>请使用 getFullYear() 方法代替。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getHours.asp" rel="nofollow">getHours()</a></td> 
   <td>返回 Date 对象的小时 (0 ~ 23)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getMinutes.asp" rel="nofollow">getMinutes()</a></td> 
   <td>返回 Date 对象的分钟 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getSeconds.asp" rel="nofollow">getSeconds()</a></td> 
   <td>返回 Date 对象的秒数 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getMilliseconds.asp" rel="nofollow">getMilliseconds()</a></td> 
   <td>返回 Date 对象的毫秒(0 ~ 999)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getTime.asp" rel="nofollow">getTime()</a></td> 
   <td>返回 1970 年 1 月 1 日至今的毫秒数。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getTimezoneOffset.asp" rel="nofollow">getTimezoneOffset()</a></td> 
   <td>返回本地时间与格林威治标准时间 (GMT) 的分钟差。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getUTCDate.asp" rel="nofollow">getUTCDate()</a></td> 
   <td>根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getUTCDay.asp" rel="nofollow">getUTCDay()</a></td> 
   <td>根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getUTCMonth.asp" rel="nofollow">getUTCMonth()</a></td> 
   <td>根据世界时从 Date 对象返回月份 (0 ~ 11)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getUTCFullYear.asp" rel="nofollow">getUTCFullYear()</a></td> 
   <td>根据世界时从 Date 对象返回四位数的年份。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getUTCHours.asp" rel="nofollow">getUTCHours()</a></td> 
   <td>根据世界时返回 Date 对象的小时 (0 ~ 23)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getUTCMinutes.asp" rel="nofollow">getUTCMinutes()</a></td> 
   <td>根据世界时返回 Date 对象的分钟 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getUTCSeconds.asp" rel="nofollow">getUTCSeconds()</a></td> 
   <td>根据世界时返回 Date 对象的秒钟 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_getUTCMilliseconds.asp" rel="nofollow">getUTCMilliseconds()</a></td> 
   <td>根据世界时返回 Date 对象的毫秒(0 ~ 999)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_parse.asp" rel="nofollow">parse()</a></td> 
   <td>返回1970年1月1日午夜到指定日期（字符串）的毫秒数。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_setDate.asp" rel="nofollow">setDate()</a></td> 
   <td>设置 Date 对象中月的某一天 (1 ~ 31)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_setMonth.asp" rel="nofollow">setMonth()</a></td> 
   <td>设置 Date 对象中月份 (0 ~ 11)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_setFullYear.asp" rel="nofollow">setFullYear()</a></td> 
   <td>设置 Date 对象中的年份（四位数字）。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_setYear.asp" rel="nofollow">setYear()</a></td> 
   <td>请使用 setFullYear() 方法代替。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_setHours.asp" rel="nofollow">setHours()</a></td> 
   <td>设置 Date 对象中的小时 (0 ~ 23)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_setMinutes.asp" rel="nofollow">setMinutes()</a></td> 
   <td>设置 Date 对象中的分钟 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">setSeconds()</a></td> 
   <td>设置 Date 对象中的秒钟 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_setMilliseconds.asp" rel="nofollow">setMilliseconds()</a></td> 
   <td>设置 Date 对象中的毫秒 (0 ~ 999)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_setTime.asp" rel="nofollow">setTime()</a></td> 
   <td>以毫秒设置 Date 对象。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_setUTCDate.asp" rel="nofollow">setUTCDate()</a></td> 
   <td>根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_setUTCMonth.asp" rel="nofollow">setUTCMonth()</a></td> 
   <td>根据世界时设置 Date 对象中的月份 (0 ~ 11)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_setUTCFullYear.asp" rel="nofollow">setUTCFullYear()</a></td> 
   <td>根据世界时设置 Date 对象中的年份（四位数字）。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_setutchours.asp" rel="nofollow">setUTCHours()</a></td> 
   <td>根据世界时设置 Date 对象中的小时 (0 ~ 23)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_setUTCMinutes.asp" rel="nofollow">setUTCMinutes()</a></td> 
   <td>根据世界时设置 Date 对象中的分钟 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_setUTCSeconds.asp" rel="nofollow">setUTCSeconds()</a></td> 
   <td>根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_setUTCMilliseconds.asp" rel="nofollow">setUTCMilliseconds()</a></td> 
   <td>根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_tosource_boolean.asp" rel="nofollow">toSource()</a></td> 
   <td>返回该对象的源代码。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_toString_date.asp" rel="nofollow">toString()</a></td> 
   <td>把 Date 对象转换为字符串。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_toTimeString.asp" rel="nofollow">toTimeString()</a></td> 
   <td>把 Date 对象的时间部分转换为字符串。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_toDateString.asp" rel="nofollow">toDateString()</a></td> 
   <td>把 Date 对象的日期部分转换为字符串。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_toGMTString.asp" rel="nofollow">toGMTString()</a></td> 
   <td>请使用 toUTCString() 方法代替。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_toUTCString.asp" rel="nofollow">toUTCString()</a></td> 
   <td>根据世界时，把 Date 对象转换为字符串。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_toLocaleString.asp" rel="nofollow">toLocaleString()</a></td> 
   <td>根据本地时间格式，把 Date 对象转换为字符串。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_toLocaleTimeString.asp" rel="nofollow">toLocaleTimeString()</a></td> 
   <td>根据本地时间格式，把 Date 对象的时间部分转换为字符串。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_toLocaleDateString.asp" rel="nofollow">toLocaleDateString()</a></td> 
   <td>根据本地时间格式，把 Date 对象的日期部分转换为字符串。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_utc.asp" rel="nofollow">UTC()</a></td> 
   <td>根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3school.com.cn/jsref/jsref_valueOf_date.asp" rel="nofollow">valueOf()</a></td> 
   <td>返回 Date 对象的原始值。</td> 
  </tr> 
 </tbody> 
</table>

# 2.Date转换时间戳 #

// 获取当前时间戳(以s为单位)
            // 第一种方式
            var timestamps = +new Date();
            timestamps = timestamps / 1000;
            // 第二种方式
            var timestamp = Date.parse(new Date());
            timestamp = timestamp / 1000;
            // 第三种方式
            var date = new Date(); 
            var str = date.getTime(); //获取从1970 年 1 月 1 日至今的毫秒数
            str = str / 1000;
     
        // 获取某个时间格式的时间戳
        var stringTime = "";
        var timestamp2 = Date.parse(new Date(stringTime));
        timestamp2 = timestamp2 / 1000;

#  3.Date日期格式转换 #

##        3.1 区域时间转换 ##

new Date((+new Date()+24*3600*1000)).toLocaleString()
    "2020/5/4 下午3:23:16"
    new Date((+new Date()+24*3600*1000)).toLocaleDateString()
    "2020/5/4"
    new Date((+new Date()+24*3600*1000)).toLocaleTimeString()
    "下午3:25:21"

##        3.2 通过Date对象的api取值拼接(yyyy-MM-dd hh:mm:ss) ##

function formatDate(now) {
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var date = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
    //      return[year,month,date].join('-')+' '+[hour,minute,second].join(':'); //这种写法也很赞
       }
    
    formatDate(new Date())
    //"2020-5-3 15:55:34"

##         3.3 给Date对象原型上绑定函数(yyyy-MM-dd hh:mm:ss) ##

Date.prototype.format = function(format) {
            var date = {
                "M+": this.getMonth() + 1,
                "d+": this.getDate(),
                "h+": this.getHours(),
                "m+": this.getMinutes(),
                "s+": this.getSeconds(),
                "q+": Math.floor((this.getMonth() + 3) / 3),
                "S+": this.getMilliseconds()
            };
            if (/(y+)/i.test(format)) {
                format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
            }
            for (var k in date) {
                if (new RegExp("(" + k + ")").test(format)) {
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
                        date[k] : ("00" + date[k]).substr(("" + date[k]).length));
                }
            }
            return format;
        }
        console.log(new Date().format('yyyy-MM-dd hh:mm:ss'));
    // 2020-05-03 16:01:15

# 4.完善的日期转化函数 #

参考资料:

1.[https://www.w3school.com.cn/jsref/jsref\_obj\_date.asp][https_www.w3school.com.cn_jsref_jsref_obj_date.asp] (w3School Js Date对象详解)

[https_www.w3school.com.cn_jsref_jsref_obj_date.asp]: https://www.w3school.com.cn/jsref/jsref_obj_date.asp