写文章

js预设一个月时间差的时间段效果详解

快乐打工仔 分类：实例代码

不少网页功能有这样的效果，那就是预先在文本框设置一个时间段，这个时间差也许几天，也许是一周，也许是一个月。

当然需要根据实际情况设定，下面就是一个设置时间差为一个月的代码实例。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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()一章节。

回复

我来回复

  • 暂无回复内容