JavaScript中的Date總結

基礎知識

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章