Javascript Date對象 --- 時間戳及淘寶倒計時搶購功能實現

時間戳(timestamp)是指格林威治時間 1970年 01月 01日 00時 00分 00秒 (北京時間1970年01月01日08時00分00秒)起至現在的總毫秒數。



Date.parse( datestring ) 

parse( ) 方法可以解析一個日期的時間字符串,並返回 1970/01/01 午夜距離該日期時間的毫秒數

//獲取2005年7月8日到格林威治時間相差的毫秒數
var timeDifference = Date.parse('2005/7/8');
console.log(timeDifference);  //1120752000000

//把毫秒數轉成年
var years = timeDifference/(365*24*60*60*1000);
console.log('從1970年1月1日到2005年7月8日已經過了:'+years +'年了!');
//從1970年1月1日到2005年7月8日已經過了:35.538812785388124年了!



dateObject.getTime( )

返回 dateObject 指定的日期和時間據 1970/01/01午夜(GMT時間)之間的毫秒數

//獲取當前客戶端系統的時間
var now = new Date();

//獲取1970/01/01午夜至今的毫秒數
var diffMilliSec = now.getTime();
console.log('1970/01/01至當前時間的毫秒數:' +diffMilliSec);  //1970/01/01至當前時間的毫秒數:1481352455327



Date( )

返回當前(執行程序那一刻)的時間和日期

//獲取當前客戶端系統的時間
var now = new Date();
console.log('當前時間是:' +now);
//當前時間是:Sat Dec 10 2016 13:26:25 GMT+0800 (中國標準時間)


(1)、按照某種格式輸出一個日期對象

new Date('yyyy/mm/dd hh:mm:ss') / new Date(yyyy,mm,dd,hh,mm,ss);

//按照 YYYY-MM-DD hh:mm:ss的格式輸出一個時間
var time1 = new Date('2016-08-25 12:26:36');
console.log(time1); //Thu Aug 25 2016 12:26:36 GMT+0800 (中國標準時間)

//按照 YYYY,MM,DD,hh,mm,ss的格式輸出一個時間
var time2 = new Date(2008,09,12,08,08,08);
console.log(time2);  //Sun Oct 12 2008 08:08:08 GMT+0800 (中國標準時間)


(2)、用毫秒數創建一個對象

new Date( ms ); 

//用毫秒數返回一個日期時間
var time3 = new Date(1120752000000);
console.log(time3);  //Fri Jul 08 2005 00:00:00 GMT+0800 (中國標準時間)



dateObject.getFullYear( )

返回是一個四位數的年份

//獲取當前客戶端系統的時間
var now = new Date();

//獲取當前時間的年份
var year = now.getFullYear();
console.log('當前時間的年份是:' +year); //當前時間的年份是:2016



dateObject.getMonth( )

返回值是 0(一月份)到 11(十二月份)之間的一個整數

//獲取當前客戶端系統的時間
var now = new Date();

//獲取當前時間的月份
var month = now.getMonth()+1;
console.log('當前時間的月份是:' +month); //當前時間的月份是:12



dateObject.getDate( )

返回值是 1 ~ 31 之間的一個整數

//獲取當前客戶端系統的時間
var now = new Date();

//獲取當前時間的天(是幾號)
var date = now.getDate();
console.log('當前時間是:' +date +'號');  //當前時間是:10號



dateObject.getDay( )

返回值是 0(週日)到 6(週六)之間的一個整數

//獲取當前客戶端系統的時間
var now = new Date();

//獲取當前時間的星期(是星期幾)
var day = now.getDay();
console.log('當前時間是星期:' +day);  //當前時間是星期:6



dateObject.getHours( )

返回值是 0(午夜24點)到 23(晚上11點)之間的一個整數

//獲取當前客戶端系統的時間
var now = new Date();

//獲取當前時間的小時
var hour = now.getHours();
hour = hour<10?0+hour:hour; //如果該值小於10,則僅返回一位數字
console.log('當前時間的小時是:' + now);  //當前時間的小時是:14



dateObject.getMinutes( )

返回值是 0 ~ 59 之間的一個整數

//獲取當前客戶端系統的時間
var now = new Date();

//獲取當前時間的分鐘數
var minute = now.getMinutes();
minute = minute<10?0+minute:minute;  //如果該值小於10,則僅返回一位數字
console.log('當前時間的分鐘數是:' +minute);  //當前時間的分鐘數是:30



dateObject.getSeconds( )

返回值是 0 ~ 59 之間的一個整數

//獲取當前客戶端系統的時間
var now = new Date();

//獲取當前時間的秒數
var second = now.getSeconds();
second = second<10?0+second:second;  //如果該值小於10,則僅返回一位數字
console.log('當前時間的秒數是:' +second);  //當前時間的秒數是:29



dateObject.getMilliseconds( )

返回值是 0 ~ 999 之間的一個整數(如果該值小於 100,則僅返回兩位數字,如果該值小於 10,則僅返回一位數字。)

//獲取當前客戶端系統的時間
var now = new Date();

//獲取當前時間的毫秒數
var millisecond = now.getMilliseconds();
console.log('當前時間的毫秒數是:' +millisecond);  //當前時間的毫秒數是:915



dateObject.getTimezoneOffset( )

返回本地時間與 GMT時間之間的時間差,以分鐘爲單位

返回之所以以分鐘計,而不是以小時計,原因是某些國家所佔有的時區甚至不到一個小時的間隔

//獲取當前客戶端系統的時間
var now = new Date();

//獲取本地時間與GMT時間之間的時間差
var diff= now.getTimezoneOffset();
console.log('本地時間與GMT時間的時間差是:' +diff +'分鐘'); //本地時間與GMT時間的時間差是:-480分鐘



注意:兩個日期對象可相減,結果是毫秒差



dateObject.toString( )

將 dateObject 輸出爲國際標準時間格式

//獲取當前客戶端系統的時間
var now = new Date();

var t1 = now.toString();
console.log('將當前時間輸出爲國際標準格式:' +t1); //將當前時間輸出爲國際標準格式:Sat Dec 10 2016 15:06:43 GMT+0800 (中國標準時間)



dateObject.toLocaleString( )

將 dateObject 輸出爲當地完整標準時間格式

//獲取當前客戶端系統的時間
var now = new Date();

var t2 = now.toLocaleString();
console.log('將當前時間輸出爲本地標準時間格式:' +t2); //將當前時間輸出爲本地標準時間格式:2016/12/10 下午3:11:00



dateObject.toLocaleDateString( )

將 dateObject 輸出爲當地時間格式,僅包含日期

//獲取當前客戶端系統的時間
var now = new Date();

var t3 = now.toLocaleDateString();
console.log('當地時間格式,僅包含日期:' +t3); //當地時間格式,僅包含日期:2016/12/10




dateObject.toLocaleTimeString( )

將 dateObject 輸出爲當地時間格式,僅包含日期

//獲取當前客戶端系統的時間
var now = new Date();

var t4 = now.toLocaleTimeString();
console.log('當地時間格式,僅包含時間:' +t4); //當地時間格式,僅包含時間:下午3:15:08



馬上就雙十二剁手節了,咱們也可以把這些知識串起來做一個簡單的搶購倒計時功能:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #timeArea{color:#f00;}
        #timeArea span{
            border:1px solid #ddd;
            padding:5px;
            margin:0 5px;
            -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
        }
    </style>
</head>
<body>

<div id="timeArea"></div>

<script src="dist/js/jquery-1.8.3.min.js"></script>
<script>
    countDown();
    function countDown(){
        //定義搶購開始的時間
        var start = new Date('2016/12/9 00:00:00');
        //把開始的時間轉爲毫秒數
        start = Date.parse(start);

        //定義搶購結束的時間
        var end = new Date('2016/12/10 23:59:59');
        //把結束的時間轉爲毫秒數
        end = Date.parse(end);

        //定義當前的時間
        var now = new Date();
        //把當前時間轉爲毫秒數
        now = Date.parse(now);

        var timeArea = $('#timeArea');
        if(now<start){
            timeArea.html('搶購尚未開始,請耐心等待!')
        }else if(now>end){
            timeArea.html('搶購已經結束,請持續關注本站,祝您下輪搶購成功!')
        }else{
            //倒計時的時間的毫秒差
            var diff = end - now;

            var date = parseInt(diff/(24*60*60*1000));
            //獲取倒計時結束的小時數
            var hour = parseInt(diff/(60*60*1000)-date*24);
            hour=hour<10?'0'+hour:hour;
            //獲取倒計時結束的分鐘數
            var minute = parseInt(diff/(60*1000) -date*24*60 -hour*60);
            minute=minute<10?'0'+minute:minute;
            //獲取倒計時結束的秒數
            var second = parseInt(diff/1000 - date*24*60*60 - hour*60*60 - minute*60);
            timeArea.html('搶購剩餘時間:<span>'+date+'</span>天'+'<span>'+hour+'</span>小時'+'<span>'+minute+'</span>分鐘'+'<span>'+second+'</span>秒')
        }
        setTimeout('countDown()',1000);
    }



</script>
</body>
</html>


效果:

wKioL1hLty-B-r92AADCddwSbvo867.gif






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