基礎知識
日期在我們處理用戶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 (中國標準時間)”格式的數據,如果想要其他格式的日期請參照第二小節所說的。