詳解JavaScript時(shí)間格式化
感謝某前輩寫(xiě)的JS格式化日期和時(shí)間JS代碼,很好很強(qiáng)大?。?!
前言:
js雖然提供了各種獲取時(shí)間Date對(duì)象的不同屬性方法,如:getDate 方法 | getDay 方法 | getFullYear 方法 | getHours 方法 ... ... 等等,但是卻沒(méi)有像java那樣提供一個(gè)方法來(lái)供用戶來(lái)根據(jù)自身提供的模板(pattern),來(lái)格式化指定時(shí)間對(duì)象,所以自己就封裝了一個(gè)小方法,只供大家閑來(lái)調(diào)侃-.-,有好的建議還望慷慨指薦哦。
用到知識(shí)點(diǎn):
• arguments:該對(duì)象代表正在執(zhí)行的函數(shù)和調(diào)用它的函數(shù)的參數(shù)。不可顯式創(chuàng)建,雖然有l(wèi)ength屬性,且能像數(shù)組一樣以“[]”語(yǔ)法方式取值,但它并不是一個(gè)數(shù)組。
• typeof object :運(yùn)算符,返回一個(gè)用來(lái)表示表達(dá)式的數(shù)據(jù)類型的字符串。六種可能: "number," "string," "boolean," "object," "function," 和 "undefined."。
• object.constructor:表示創(chuàng)建對(duì)象的函數(shù)。object必須是對(duì)象或函數(shù)的名稱?;A(chǔ)數(shù)據(jù)沒(méi)有該屬性。
• exec 方法:用正則表達(dá)式模式在字符串中運(yùn)行查找,并返回包含該查找結(jié)果的一個(gè)數(shù)組。沒(méi)有找到匹配,則它返回 null。數(shù)組中同類型匹配元素不會(huì)重復(fù)出現(xiàn)。
• str.split(Rex|str):以一個(gè)正則對(duì)象或子字符串,將一個(gè)字符串分割為子字符串,然后將結(jié)果作為字符串?dāng)?shù)組返回。
• throw Error('msg'):拋出一個(gè)帶有Message信息的Error。throw 后面可跟任何表達(dá)式。
• 還有一些for..in用法,三目運(yùn)算符,substr這些就不講了,比較簡(jiǎn)單。
代碼片段:
/** * ***js時(shí)間日期格式化*** <br> * <p> * 模版字符串采用嚴(yán)謹(jǐn)格式,超出則會(huì)拋出異常,且每類格式只可出現(xiàn)一次,如:yyyy-mm-yyyy 格式會(huì)拋異常 * </p> * y-年 length: 2/4位 <br> * q-季度 length: 1位 <br> * M-月 length: 1~2位 <br> * d-日 length: 1~2位 <br> * H-時(shí) length: 1~2位24小時(shí)制,h:12小時(shí)制 <br> * m-分 length: 1~2位 <br> * s-秒 length: 1~2位 <br> * S-毫秒 length: 固定1位 * @param {Date類型對(duì)象} date * @param {String類型模板字符串} fmt * @return 格式化后時(shí)間日期字符串 * @author lyt * blongs: http://www.cnblogs.com/liuyitian/ */ function DateFormat(date, fmt){ if (arguments.length != 2) // 參數(shù)個(gè)數(shù)校驗(yàn) throw Error('arguments長(zhǎng)度不合法'); if (!date || (typeof date != 'object') || (d.constructor != Date)) // 參數(shù)合法性校驗(yàn) throw Error(arguments[0] + ':類型不為Date類型'); if (/H+/.test(fmt) && /h+/.test(fmt)) throw Error("小時(shí)格式錯(cuò)誤,同類型只能連續(xù)出現(xiàn)一次!"); /* 模板參數(shù)校驗(yàn),正則驗(yàn)證方法 */ var verify = function(Rex ){ var arr = new RegExp(Rex).exec(fmt); // 獲得匹配結(jié)果數(shù)組 if (!arr) // 匹配失敗返回 return ""; if (fmt.split(Rex).length > 2) // 同一類型間隔出現(xiàn)多次 throw Error("fmt格式錯(cuò)誤:同類型只能連續(xù)出現(xiàn)一次!"); return arr[0]; }; /** * 提供月、天、時(shí)、分、秒通用匹配替換 * @param {對(duì)象o屬性key} r * @param {r對(duì)應(yīng)正則對(duì)象} rex **/ var common = function(r, rex) { if(len !=1 && len !=2) throw Error("月份格式錯(cuò)誤:M只能出現(xiàn)1/2次"); len == 2 ? fmt=fmt.replace(rex, o[r].length==1 ? "0"+o[r] : o[r]) : fmt=fmt.replace(rex, o[r]); } var o = { // 數(shù)據(jù)存儲(chǔ)對(duì)象 "y+": date.getFullYear() + "", // 年 "q+": Math.floor((date.getMonth() + 3) / 3), // 季度 "M+": date.getMonth() + 1 + "", // 月 "d+": date.getDate() + "", // 日 "H+": date.getHours() + "", // 24時(shí) "h+": date.getHours() + "", // 12時(shí) "m+": date.getMinutes() + "", // 分 "s+": date.getSeconds() + "", // 秒 "S+": date.getMilliseconds() // 毫秒 } for(var r in o) { var rex, len, temp; rex = new RegExp(r); temp = verify(rex); // 匹配所得字符串 len = temp.length; // 長(zhǎng)度 if(!len || len == 0) continue; if(r == "y+") { if(len !=2 && len != 4) throw Error("年份格式錯(cuò)誤:y只能出現(xiàn)2/4次"); len == 2 ? fmt=fmt.replace(rex, o[r].substr(2,3)) : fmt=fmt.replace(rex, o[r]); } else if(r == "q+") { if(len != 1) throw Error("季度格式錯(cuò)誤:q只能出現(xiàn)1次"); fmt=fmt.replace(rex, o[r]); } else if(r == "h+") { if(len !=1 && len !=2) throw Error("小時(shí)格式錯(cuò)誤:h只能出現(xiàn)1/2次"); var h = (o[r] > 12 ? o[r]-12 : o[r]) + ""; len == 2 ? fmt=fmt.replace(rex, h.length==1 ? "0"+h : h) : fmt=fmt.replace(rex, h); } else if(r == "S+") { if(len != 1) throw Error("毫秒數(shù)格式錯(cuò)誤:S只能出現(xiàn)1次"); fmt=fmt.replace(rex, o[r]); }else { // (r=="M+" || r=="d+" || r=="H+" || r=="m+" || r=="s+") common(r, rex) } } return fmt; }
上幾個(gè)演示效果,供大家參考:
console.log(DateFormat(new Date(),'yyyy年第q季度M月dd日HH時(shí)m分s秒S毫秒'));
console.log(DateFormat(new Date(),'yyyy年yy第q季度M月dd日HH時(shí)m分s秒S毫秒'));
console.log(DateFormat(new Date(),'yyyy年第q季度M月dd日Hh時(shí)m分s秒S毫秒'));
console.log(DateFormat("我不是時(shí)間對(duì)象",'yyyy年第q季度M月dd日Hh時(shí)m分s秒S毫秒'));
console.log(DateFormat(new Date(),'yyyy年第q季度MMM月dd日HH時(shí)m分s秒S毫秒'));
其他效果就不一一列舉了,感興趣的可以把代碼拷貝下來(lái)直接測(cè)試就行了,有任何BUG或者有待優(yōu)化的地方請(qǐng)慷慨指正哦。
通過(guò)以上內(nèi)容給大家詳解了JavaScript時(shí)間格式化相關(guān)知識(shí),希望大家喜歡。
相關(guān)文章
JavaScript獲取GridView中用戶點(diǎn)擊控件的行號(hào),列號(hào)
GridView中的某幾列有按鈕,需要獲取用戶當(dāng)前點(diǎn)的按鈕的行號(hào)(捎帶的得到列號(hào))2009-04-04淺談js的ajax的異步和同步請(qǐng)求的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談js的ajax的異步和同步請(qǐng)求的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10Js之軟鍵盤(pán)實(shí)現(xiàn)(js源碼)
Js之軟鍵盤(pán)實(shí)現(xiàn)(js源碼)...2007-01-01解決Jstree 選中父節(jié)點(diǎn)時(shí)被禁用的子節(jié)點(diǎn)也會(huì)選中的問(wèn)題
下面小編就為大家分享一篇解決Jstree 選中父節(jié)點(diǎn)時(shí)被禁用的子節(jié)點(diǎn)也會(huì)選中的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12用JS做的簡(jiǎn)單的可折疊的兩級(jí)樹(shù)形菜單
可折疊的樹(shù)形菜單想必大家并不陌生吧,實(shí)現(xiàn)方法有多種,在本文將為大家介紹下js是如何實(shí)現(xiàn)的,希望對(duì)大家有所幫助2013-09-09通過(guò)JS深度判斷兩個(gè)對(duì)象字段相同
這篇文章主要介紹了通過(guò)JS深度判斷兩個(gè)對(duì)象字段相同,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下2019-06-06JavaScript?弱引用強(qiáng)引用底層示例詳解
這篇文章主要為大家介紹了JavaScript?弱引用強(qiáng)引用底層示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10常用JS圖片滾動(dòng)(無(wú)縫、平滑、上下左右滾動(dòng))代碼大全(推薦)
本文給大家分享一段js代碼關(guān)于實(shí)現(xiàn)圖片滾動(dòng)效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2016-12-12