DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript之Date日期對象擴展
JavaScript之Date日期對象擴展
編輯:JavaScript基礎知識     

一、前言

  JavaScript Date對象提供了諸多日期相關屬性以及操作日期的相關方法,為開發網站帶來了許多方便。然而,大部分web頁面展示給用戶的日期格式可能是這樣:yyyy-MM-dd hh:mm:ss(類似於c# java的ToString())。

  不論是JavaScript Date對象的toString()方法,還是JavaScript Date對象的toGMTString()、toISOString()、toLocaleDateString()等方法,都無法轉化成我們平時開發中想要的日期字符串格式;同時,關於日期相加減運算訪求的封裝,JavaScript Date對象也提供;那麼,問題來了,我們平時編碼過程中需要進行日期相關運算的時候,該怎麼辦呢?最佳途徑就是,自己動手封裝平時經常用到的日期處理函數,下面的代碼就是本人在開發過程中封裝的一些簡單而用實用的日期處理函數。在未來的開發過程中,我會不斷的完善、擴展及優化這些日期處理函數。

二、代碼

 //名稱:日期加法函數
 //參數:part(year、month、day、hour、minute、second、millisecond)
 //返回:Date對象
 Date.prototype.add = function (part, value) {
     if (!value || isNaN(value)) value = 0;
     switch (part) {
         case "year":
             this.setFullYear(this.getFullYear() + value);
             break;
         case "month":
             this.setMonth(this.getMonth() + value);
             break;
         case "day":
             this.setDate(this.getDate() + value);
             break;
         case "hour":
             this.setHours(this.getHours() + value);
             break;
         case "minute":
             this.setMinutes(this.getMinutes() + value);
             break;
         case "second":
             this.setSeconds(this.getSeconds() + value);
             break;
         case "millisecond":
             this.setMilliseconds(this.getMilliseconds() + value);
             break;
         default:
     }
     return this;
 };
 
 Date.prototype.addYears = function (value) {
     if (!value || isNaN(value)) value = 0;
     this.setFullYear(this.getFullYear() + value);
     return this;
 };
 
 Date.prototype.addMonths = function (value) {
     if (!value || isNaN(value)) value = 0;
     this.setMonth(this.getMonth() + value);
     return this;
 };
 
 Date.prototype.addDays = function (value) {
     if (!value || isNaN(value)) value = 0;
     this.setDate(this.getDate() + value);
     return this;
 };
 
 Date.prototype.addHours = function (value) {
     if (!value || isNaN(value)) value = 0;
     this.setHours(this.getHours() + value);
     return this;
 };
 
 Date.prototype.addMinutes = function (value) {
     if (!value || isNaN(value)) value = 0;
     this.setMinutes(this.getMinutes() + value);
     return this;
 };
 
 Date.prototype.addSeconds = function (value) {
     if (!value || isNaN(value)) value = 0;
     this.setSeconds(this.getSeconds() + value);
     return this;
 };
 
 Date.prototype.addMilliseconds = function (value) {
     if (!value || isNaN(value)) value = 0;
     this.setMilliseconds(this.getMilliseconds() + value);
     return this;
 };
 
 //名稱:日期加法函數
 //參數:time(日期字符串,示例:12:00:00)
 //返回:Date對象
 Date.prototype.addTime = function (time) {
     var timeRegex = /^([0-1]?\d|2[0-3])(:[0-5]?\d){1,2}$/g;
     if (timeRegex.test(time)) {
         var value = Date.parse("1970/1/1 " + time) - Date.parse("1970/1/1");
         this.setMilliseconds(this.getMilliseconds() + value);
     }
     return this;
 };
 
 //名稱:日期格式化函數
 //參數:format(示例:yyyy-MM-dd hh:mm:ss)、zeroize(是否補零)
 //返回:日期字符串
 Date.prototype.toCustomString = function (format, zeroize) {
     if (!zeroize) zeroize = false;
     var dy = this.getFullYear();
     var dM = this.getMonth() + 1;
     var dd = this.getDate();
     var dh = this.getHours();
     var dm = this.getMinutes();
     var ds = this.getSeconds();
     var dS = this.getMilliseconds();
     var orm = {
         "y+": dy.toString(),
         "M+": !zeroize ? dM.toString() : dM < 10 ? '0' + dM : dM.toString(),
         "d+": !zeroize ? dd.toString() : dd < 10 ? '0' + dd : dd.toString(),
         "h+": !zeroize ? dh.toString() : dh < 10 ? '0' + dh : dh.toString(),
         "m+": !zeroize ? dm.toString() : dm < 10 ? '0' + dm : dm.toString(),
         "s+": !zeroize ? ds.toString() : ds < 10 ? '0' + ds : ds.toString(),
         "S": dS.toString()
     };
     for (var i in orm) {
         var patt = new RegExp(i);
         if (patt.test(format)) {
             var item = orm[i];
             var ms = format.match(patt);
             var result = ms[0];
             if (i === "S") {
                 format = format.replace(result, item);
             } else {
                 format = format.replace(result, item.substr(item.length - result.length));
             }
         }
     }
     return format;
 };
View Code

三、分析

1.add函數:此函數的第一個參數提供了日期需要進行運算的部分(year、month、day、hour、minute、second、millisecond),返回日期對象;

2.add##函數:類似於addYear、addMonth、addDays等函數,即是對add函數的分解,為日期處理提供了更為方便快捷的功能;

3.addTime函數:此函數提供了日期對象類型與時間字符串類型運算的功能,time參數為時間字符串(示例:10:00:00);

4.toCustomString函數:此函數提供了日期對象類型轉化成指定格式的日期字符串,format為日期格式化字符串參數(示例:yyyy-MM-dd hh:mm:ss);

以下示例中,示例1、示例2演示了add函數、add##函數的使用;示例3演示了addTime函數的使用。

三個示例中均用到toCustomString函數對結果進行格式化輸出。

 //示例1:d1數據類型為整形,日期毫秒數
 var d1 = Date.now();
 var ret1 = new Date(d1).add("year", 2);//或者:var ret1 = new Date(d1).addYear(2);            
 console.log(ret1.toCustomString("yyyy-MM-dd hh:mm:ss"));
 //打印:2018-3-28 19:15:45
 
 //示例2:d2數據類型為字符串型,日期字符串
 var d2 = "2016-1-1 12:00:00";
 var ret2 = new Date(Date.parse(d2)).add("day", 10);//或者:var ret2 = new Date(Date.parse(d2)).addDays(10);            
 console.log(ret2.toCustomString("yyyy/MM/dd hh時mm分ss秒", true));
 //打印:2016/01/11 12時00分00秒
 
 //示例3:日期類型與時間字符串類型的運算
 var ret3 = new Date(Date.now()).addTime("2:10:00");
 console.log(ret3.toCustomString("yyyy-MM-dd hh:mm:ss", true));
 //打印:2016-03-28 21:25:45
View Code
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved