js預設一個月時間差的時間段效果詳解

antzone發表於2017-04-07
JS

不少網頁功能有這樣的效果，那就是預先在文字框設定一個時間段，這個時間差也許幾天，也許是一週，也許是一個月。

當然需要根據實際情況設定，下面就是一個設定時間差為一個月的程式碼例項。

程式碼如下:

[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;
}
 
var begin=new Date();
var end=new Date();
 
new Date(begin.setMonth((new Date().getMonth()-1)));
 
var begintime= begin.format("yyyy-MM-dd");
var endtime=end.format("yyyy-MM-dd");
 
window.onload=function(){
  var ostart=document.getElementById("start");
  var oend=document.getElementById("end");
  ostart.value=begintime;
  oend.value=endtime;
}
</script>
</head>
<body>
<input type="text" id="start"/>
<input type="text" id="end"/>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.Date.prototype.format = function(format) {}，為Date原型新增一個format()方法，此方法能夠對時間日期字串進行格式化。

（2）.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

},此物件非常巧妙，屬性可以作為正規表示式使用在後面。

（3）.if (/(y+)/.test(format))

  format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length))

判斷字串是否匹配相應的正規表示式。

如果匹配，那麼就將年份部分替換為真實的年份數字，然後再給句"y"的資料進行字串擷取，比如如果是"yyyy"，那麼就保持完整的年份，比如2015，如果是"yy"就保留兩位"15"。

（4）.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))

進行遍歷操作，根據需要完成了個位數前面補領效果。

二.相關閱讀:

（1）.prototype可以參閱javascript prototype原型一章節。

（2）.Date物件可以參閱JavaScript Date物件一章節。

（3）.replace()可以參閱正規表示式replace()函式一章節。

（4）.substr()方法可以參閱javascript substr()一章節。

相關文章