基于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=\

  <meta http-equiv=\   <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)$);       var m=parseInt(countDown/60`);

      var s=parseInt(countDown`);               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=\

    <p>倒计时间:<span id=\     <p>当前时间:<span id=\   </div> </body> </html>

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

联系客服:779662525#qq.com(#替换为@) 苏ICP备20003344号-4