JavaScript時間日期格式化

admin發表於2019-12-10
JavaScript

原生的時間日期可讀性很差，有時格式可以說比較狂野，通常不能夠滿足我們的需要。

下面通過例項程式碼詳細介紹一下如何實現自定義時間日期格式化功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
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;
}
setInterval(function(){
  var time = new Date().format("hh:mm:ss");
  var date = new Date().format("yyyy-MM-dd");
  document.getElementById("Time").innerHTML=time;
  document.getElementById("Date").innerHTML=date;
},1000);
</script>
</head>
<body>
<div id="Date"></div>
<div id="Time"></div>
</body>
</html>

程式碼實現了我們的要求，能夠實現自定義格式化效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.Date.prototype.format=function(format){}，為Date例項新增一個方法，引數用來標識格式的字串。

（2）.var o = {}，宣告一個物件，屬性可以用來作為正規表示式進行匹配，屬性值是對應時間日期。

（3）."M+" : this.getMonth()+1，表示月份，加1是因為getMonth()方法獲取的值總比當前月份小1，比如一月份，那麼獲取的值是0。

（4）."q+" : Math.floor((this.getMonth()+3)/3)，表示季度。

（5）.if(/(y+)/.test(format))，判斷引數字串中是否存在格式化年份的標識；y是年份的標識，沒有放在物件o中，是因為年份是四位的。

（6）.format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4-RegExp.$1.length))，RegExp.$1表示第一個子表示式，這就是表示年份的字串標識，比如"yyyy"；(this.getFullYear()+"").substr(4-RegExp.$1.length)擷取字串，比如"yyyy"表示保留四位年份如"2014"，那麼就是從第一個開始擷取。最後進行替換。

（7）.for(var k in o)，遍歷物件的屬性。

（8）.if(new RegExp("("+ k +")").test(format))，判斷引數字串中是否存在對應的時間日期格式字串。

（9）.format=format.replace(RegExp.$1,RegExp.$1.length==1?o[k]: ("00"+ o[k]).substr((""+o[k]).length))，進行字串替換，當然裡面有點小技巧，RegExp.$1.length==1表示時間日期個位的時候，前面不需要加0，也就是8，而不是08這種形式，("00"+ o[k]).substr((""+o[k]).length)這個實現加0效果。

二.相關閱讀:

（1）.關於時間物件參閱JavaScript Date物件一章節。 

（2）.replace()參閱正規表示式replace()一章節。 

（3）.substr()參閱JavaScript substr()一章節。  

（4）.prototype參閱JavaScript prototype一章節。

相關文章