基於javascript顯示目前時間以及倒計時功能,javascript目前時間

來源:互聯網
上載者:User

基於javascript顯示目前時間以及倒計時功能,javascript目前時間

自我練習,順便分享給大家的一段js原生代碼。
Date 對象用於處理日期和時間。
Date()  返回當日的日期和時間。
getDate()  從 Date 對象返回一個月中的某一天 (1 ~ 31)。
getDay()  從 Date 對象返回一周中的某一天 (0 ~ 6)。
getMonth()  從 Date 對象返回月份 (0 ~ 11)。
getFullYear()  從 Date 對象以四位元字返回年份。
getYear()  請使用 getFullYear() 方法代替。
getHours()  返回 Date 對象的小時 (0 ~ 23)。
getMinutes()  返回 Date 對象的分鐘 (0 ~ 59)。
getSeconds()  返回 Date 對象的秒數 (0 ~ 59)。
getMilliseconds()  返回 Date 對象的毫秒(0 ~ 999)。
getTime()  返回 1970 年 1 月 1 日至今的毫秒數。
getTimezoneOffset()  返回本地時間與格林威治標準時間 (GMT) 的分鐘差。
getUTCDate()  根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。
getUTCDay()  根據世界時從 Date 對象返回周中的一天 (0 ~ 6)。
getUTCMonth()  根據世界時從 Date 對象返回月份 (0 ~ 11)。
getUTCFullYear()  根據世界時從 Date 對象返回四位元的年份。
getUTCHours()  根據世界時返回 Date 對象的小時 (0 ~ 23)。
getUTCMinutes()  根據世界時返回 Date 對象的分鐘 (0 ~ 59)。
getUTCSeconds()  根據世界時返回 Date 對象的秒鐘 (0 ~ 59)。
getUTCMilliseconds()  根據世界時返回 Date 對象的毫秒(0 ~ 999)。
parse()  返回1970年1月1日午夜到指定日期(字串)的毫秒數。
setDate()  設定 Date 對象中月的某一天 (1 ~ 31)。
setMonth()  設定 Date 對象中月份 (0 ~ 11)。
setFullYear()  設定 Date 對象中的年份(四位元字)。
setYear()  請使用 setFullYear() 方法代替。
setHours()  設定 Date 對象中的小時 (0 ~ 23)。
setMinutes()  設定 Date 對象中的分鐘 (0 ~ 59)。
setSeconds()  設定 Date 對象中的秒鐘 (0 ~ 59)。
setMilliseconds()  設定 Date 對象中的毫秒 (0 ~ 999)。
setTime()  以毫秒設定 Date 對象。
setUTCDate()  根據世界時設定 Date 對象中月份的一天 (1 ~ 31)。
setUTCMonth()  根據世界時設定 Date 對象中的月份 (0 ~ 11)。
setUTCFullYear()  根據世界時設定 Date 對象中的年份(四位元字)。
setUTCHours()  根據世界時設定 Date 對象中的小時 (0 ~ 23)。
setUTCMinutes()  根據世界時設定 Date 對象中的分鐘 (0 ~ 59)。
setUTCSeconds()  根據世界時設定 Date 對象中的秒鐘 (0 ~ 59)。
setUTCMilliseconds()  根據世界時設定 Date 對象中的毫秒 (0 ~ 999)。
toSource()  返回該對象的原始碼。
toString()  把 Date 對象轉換為字串。
toTimeString()  把 Date 對象的時間部分轉換為字串。
toDateString()  把 Date 對象的日期部分轉換為字串。
toGMTString()  請使用 toUTCString() 方法代替。
toUTCString()  根據世界時,把 Date 對象轉換為字串。
toLocaleString()  根據本地時間格式,把 Date 對象轉換為字串。
toLocaleTimeString()  根據本地時間格式,把 Date 對象的時間部分轉換為字串。
toLocaleDateString()  根據本地時間格式,把 Date 對象的日期部分轉換為字串。
UTC()  根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數。
valueOf()  返回 Date 對象的原始值。
具體實現代碼:

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <title>原生js 目前時間 倒計時代碼</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.前面補0    function p(n){      return n<10?'0'+n:n;    }    //2.倒計時    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)+'時'+p(m)+'分'+p(s)+'秒';      setTimeout('getMyTime()',500);      if(countDown<=0){       document.getElementById('time').innerHTML='活動結束';       }           }    //3.目前時間    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 class="text">    <p>倒計時間:<span id="time"></span></p>    <p>目前時間:<span id="time1"></span></p>   </div></body></html>

以上就是本文的全部內容,希望對大家學習javascript程式設計有所協助。

您可能感興趣的文章:
  • asp.net 實現動態顯示目前時間(不用javascript不考慮開銷)
  • JavaScript 擷取目前時間戳的代碼
  • JS中處理與目前時間間隔的函數代碼
  • JS動態擷取目前時間,並寫到特定的地區
  • js判斷選擇時間不能小於目前時間的範例程式碼
  • js幾秒以後倒計時跳轉樣本
  • JS之Date對象和擷取系統目前時間詳解
  • 簡單易用的倒計時js代碼
  • js擷取目前時間顯示在頁面上並每秒重新整理

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.