基础知识
日期在我们处理用户form表单验证,监测装置信息等很多方面都有使用。在使用过程中我总结出以下几点常使用的Date方法:字符串转换成日期格式、number型转换成日期格式、日期格式的变化、日期大小的比较、日期的自动刷新
注:此小节主要介绍:字符串转换成日期格式、number型转换成日期格式
1.string类型=>date型
var date = new Date('December 17, 1995 03:24:00');(UTC 日期格式的字符串)
console.log(date)//Date {Sun Dec 17 1995 03:24:00 GMT+0800}
var date = new Date('1995-12-17T03:24:00');(ISO日期类型
console.log(date)//Date {Sun Dec 17 1995 03:24:00 GMT+0800}
2.number类型=>date型
var date = new Date(1995, 11, 17);
console.log(date)//Date {Sun Dec 17 1995 00:00:00 GMT+0800}
注:在Date对象中月份值是:0-11,因此传入11表示12月份.
var date = new Date(1995, 11, 17, 3, 24, 0);
console.log(date)//Date {Sun Dec 17 1995 03:24:00 GMT+0800}
var date = new Date(1453094034000);
// (1453094034000是毫米数,表示距1970年1月1日的毫秒数从而转换成日期)
console.log(date)//Date {Mon Jan 18 2016 13:13:54 GMT+0800}
总结:string类型转换成date型时需要满足这个string必须是日期样式的string型,常见的有utc和iso。
number转date时,传入任何值都能转成日期格式。但是要想得到准确的日期,尽量精确到单位秒,例如:
var date = new Date(1995, 11, 17, 3, 24, 0)
日期的格式转换
上小节谈了非日期格式转换为日期格式,本节谈下常见的日期格式。
1.日期格式的变化
首先谈谈Date中日期格式的转化:
var a=new Date(2017,1,1,1,1,1)
Date转成字符串型,当前时区的(便于操作)
a.toString()//"Wed Feb 01 2017 01:01:01 GMT+0800"
ISO 860国际日期格式标注,当前时区的(字符串类型)
a.toISOString()//"2017-01-31T17:01:01.000Z"
人类易读的时间格式(没有时分秒)
a.toDateString()//"Wed Feb 01 2017"
人类易读的时间格式(没有年月日)
a.toTimeString()//"01:01:01 GMT+0800"
方法返回该日期对象日期部分的字符串,该字符串格式因不同语言而不同。新增的参数 locales 和 options 使程序能够指定使用哪种语言格式化规则,允许定制该方法的表现(behavior)。在旧版本浏览器中, locales 和 options 参数被忽略,使用的语言环境和返回的字符串格式是各自独立实现的。
toLocaleDateString(locales,options)
注:详细解释强参照:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
a.toLocaleDateString()//"2017/2/1"
国际时区的日期格式
a.toUTCString()//"Tue, 31 Jan 2017 17:01:01 GMT"
JavaScript中的日期处理库Moment.js:
Moment.js是轻量级的Javascript日期处理类库,它提供了许多方法属性来处理JavaScript中的日期格式。其中提供了moment().format()的日期格式化处理。以下是对moment().format()用法的简单介绍:
var a=new Date(2017,1,1,1,1,1)
moment(a).format("YY")//17
moment(a).format("YYYY")//2017
moment(a).format("YYYY/MM/DD")//2017/02/01
moment(a).format("YYYY-MM-DD")//2017-02-01
moment(a).format("YYYY-MM-DD hh:mm:ss")//2017-02-01 01:01:01
日期大小比较
在form表单验证日期大小的比较经常被我们用到,本节介绍javaScript中日期的大小比较:
比较日期只要我们将其转换成number型可以方便比较。
1.Date中的三个静态函数
Date.now()//返回自 1970-1-1 00:00:00 UTC (时间标准时间)至今所经过的毫秒数。
只能返回当前的时间,不适合用于比较时间的大小。
Date.parse(dateString)//解析一个表示日期的字符串,并返回从 1970-1-1 00:00:00 所经过的毫秒数。
必须是日期
可以用来比较获取日期字符串类型。
Date.UTC(y,m,d,h,m,s)//接受和构造函数最长形式的参数相同的参数(从2到7),并返回从 1970-01-01 00:00:00 UTC 开始所经过的毫秒数。
用来比较从输入框中获取的日期,年月日时分秒是分开的。
注:以上比较的都是日期类型,而不是Date型变量。当我获取的日期不是Date型时比较实用,当我们获取的日期是Date型时可以使用Date实例中的方法及Date.prototype中的方法
例如:
var time=new Date();//实例化Date对象
time.getTime() 或者 time.valueOf()
自动刷新
在我们开发一个页面需要显示时间时,我们往往需要用到时间的自动刷新功能,因为我们不能一直的向服务端请求数据,这样不仅造成资源的浪费甚至有可能因操作不当导致内存泄漏。如果我们用js中的setInterval()或setTimeout()来实现时间自动刷新,将更方便实用。本节介绍使用setInterval来实现:
setInterval()+new Date()+Date.prototype.valueOf()实现时间的自动刷新:
假设我们从后台获取的时间即为当前的时间:
html:
<div id="time"> </div>
<button onclick="time()" class="button">显示时间</button>
js:
<script type="text/javascript">
function time() {
var time=new Date();//获取当前时间
var h=document.getElementById("time");
console.log(h)
var refreshTime=this.setInterval(function () {//每个一秒执行的方法如下
time = new Date(time.valueOf() + 1000);
console.log()
h.innerHTML= time;
}, 1000);
}
</script>
此种展现的时间为Date:”Sun Mar 19 2017 21:30:03 GMT+0800 (中国标准时间)”格式的数据,如果想要其他格式的日期请参照第二小节所说的。