基于javascript顯示當(dāng)前時(shí)間以及倒計(jì)時(shí)功能

字號(hào):


    這篇文章主要介紹了基于javascript顯示當(dāng)前時(shí)間以及倒計(jì)時(shí)功能的相關(guān)資料,需要的朋友可以參考下
    自我練習(xí),順便分享給大家的一段js原生代碼。
    Date 對(duì)象用于處理日期和時(shí)間。
    Date()  返回當(dāng)日的日期和時(shí)間。
    getDate()  從 Date 對(duì)象返回一個(gè)月中的某一天 (1 ~ 31)。
    getDay()  從 Date 對(duì)象返回一周中的某一天 (0 ~ 6)。
    getMonth()  從 Date 對(duì)象返回月份 (0 ~ 11)。
    getFullYear()  從 Date 對(duì)象以四位數(shù)字返回年份。
    getYear()  請(qǐng)使用 getFullYear() 方法代替。
    getHours()  返回 Date 對(duì)象的小時(shí) (0 ~ 23)。
    getMinutes()  返回 Date 對(duì)象的分鐘 (0 ~ 59)。
    getSeconds()  返回 Date 對(duì)象的秒數(shù) (0 ~ 59)。
    getMilliseconds()  返回 Date 對(duì)象的毫秒(0 ~ 999)。
    getTime()  返回 1970 年 1 月 1 日至今的毫秒數(shù)。
    getTimezoneOffset()  返回本地時(shí)間與格林威治標(biāo)準(zhǔn)時(shí)間 (GMT) 的分鐘差。
    getUTCDate()  根據(jù)世界時(shí)從 Date 對(duì)象返回月中的一天 (1 ~ 31)。
    getUTCDay()  根據(jù)世界時(shí)從 Date 對(duì)象返回周中的一天 (0 ~ 6)。
    getUTCMonth()  根據(jù)世界時(shí)從 Date 對(duì)象返回月份 (0 ~ 11)。
    getUTCFullYear()  根據(jù)世界時(shí)從 Date 對(duì)象返回四位數(shù)的年份。
    getUTCHours()  根據(jù)世界時(shí)返回 Date 對(duì)象的小時(shí) (0 ~ 23)。
    getUTCMinutes()  根據(jù)世界時(shí)返回 Date 對(duì)象的分鐘 (0 ~ 59)。
    getUTCSeconds()  根據(jù)世界時(shí)返回 Date 對(duì)象的秒鐘 (0 ~ 59)。
    getUTCMilliseconds()  根據(jù)世界時(shí)返回 Date 對(duì)象的毫秒(0 ~ 999)。
    parse()  返回1970年1月1日午夜到指定日期(字符串)的毫秒數(shù)。
    setDate()  設(shè)置 Date 對(duì)象中月的某一天 (1 ~ 31)。
    setMonth()  設(shè)置 Date 對(duì)象中月份 (0 ~ 11)。
    setFullYear()  設(shè)置 Date 對(duì)象中的年份(四位數(shù)字)。
    setYear()  請(qǐng)使用 setFullYear() 方法代替。
    setHours()  設(shè)置 Date 對(duì)象中的小時(shí) (0 ~ 23)。
    setMinutes()  設(shè)置 Date 對(duì)象中的分鐘 (0 ~ 59)。
    setSeconds()  設(shè)置 Date 對(duì)象中的秒鐘 (0 ~ 59)。
    setMilliseconds()  設(shè)置 Date 對(duì)象中的毫秒 (0 ~ 999)。
    setTime()  以毫秒設(shè)置 Date 對(duì)象。
    setUTCDate()  根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中月份的一天 (1 ~ 31)。
    setUTCMonth()  根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的月份 (0 ~ 11)。
    setUTCFullYear()  根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的年份(四位數(shù)字)。
    setUTCHours()  根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的小時(shí) (0 ~ 23)。
    setUTCMinutes()  根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的分鐘 (0 ~ 59)。
    setUTCSeconds()  根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的秒鐘 (0 ~ 59)。
    setUTCMilliseconds()  根據(jù)世界時(shí)設(shè)置 Date 對(duì)象中的毫秒 (0 ~ 999)。
    toSource()  返回該對(duì)象的源代碼。
    toString()  把 Date 對(duì)象轉(zhuǎn)換為字符串。
    toTimeString()  把 Date 對(duì)象的時(shí)間部分轉(zhuǎn)換為字符串。
    toDateString()  把 Date 對(duì)象的日期部分轉(zhuǎn)換為字符串。
    toGMTString()  請(qǐng)使用 toUTCString() 方法代替。
    toUTCString()  根據(jù)世界時(shí),把 Date 對(duì)象轉(zhuǎn)換為字符串。
    toLocaleString()  根據(jù)本地時(shí)間格式,把 Date 對(duì)象轉(zhuǎn)換為字符串。
    toLocaleTimeString()  根據(jù)本地時(shí)間格式,把 Date 對(duì)象的時(shí)間部分轉(zhuǎn)換為字符串。
    toLocaleDateString()  根據(jù)本地時(shí)間格式,把 Date 對(duì)象的日期部分轉(zhuǎn)換為字符串。
    UTC()  根據(jù)世界時(shí)返回 1970 年 1 月 1 日 到指定日期的毫秒數(shù)。
    valueOf()  返回 Date 對(duì)象的原始值。
    具體實(shí)現(xiàn)代碼:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>原生js 當(dāng)前時(shí)間 倒計(jì)時(shí)代碼</title>
      <style>
      *{margin:0;padding:0;}
      body{text-align:center;}
      .text{margin-top:150px;font-size:14px;}
      </style>
      <script>
        window.onload=function(){      
          getMyTime(); 
          getMyTime1();  
        }
        //1.前面補(bǔ)0
        function p(n){
          return n<10?'0'+n:n;
        }
        //2.倒計(jì)時(shí)
        function getMyTime(){      
          var startDate=new Date();
          var endDate=new Date('2017/4/17 11:15:00');
          var countDown=(endDate.getTime()-startDate.getTime())/1000;
          var day=parseInt(countDown/(24*60*60));
          var h=parseInt(countDown/(60*60)%24);
          var m=parseInt(countDown/60%60);
          var s=parseInt(countDown%60);        
          document.getElementById('time').innerHTML=day+'天'+p(h)+'時(shí)'+p(m)+'分'+p(s)+'秒';
          setTimeout('getMyTime()',500);
          if(countDown<=0){
           document.getElementById('time').innerHTML='活動(dòng)結(jié)束'; 
          }       
        }
        //3.當(dāng)前時(shí)間
        function getMyTime1(){
          var myDate=new Date();
          var year=myDate.getFullYear();
          var month=myDate.getMonth()+1;
          var day=myDate.getDate();
          var week=myDate.getDay();
          var array=['星期日','星期一','星期二','星期三','星期四','星期五','星期六',];
          var hour=myDate.getHours();
          var minute=myDate.getMinutes();
          var second=myDate.getSeconds();
          document.getElementById('time1').innerHTML=year+'年'+month+'月'+day+'日'+' '+array[week]+' '+p(hour)+':'+p(minute)+':'+p(second);
          setTimeout('getMyTime1()',500);
        }
      </script>
    </head>
    <body>
      <div>
        <p>倒計(jì)時(shí)間:<span id="time"></span></p>
        <p>當(dāng)前時(shí)間:<span id="time1"></span></p> 
      </div>
    </body>
    </html>
    以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。