[JS]笔记13之Date对象

时间：2022-05-22 10:31:43

-->获取与设置时间的方法
-->使用Date对象制作相应的效果

1、设置时间
创建一个时间对象

new Date(time);

设置时间 time

从1970年1月1日至
几种格式：
new Date("May 25 , 2024");
new Date("2015/12/25,12:20:12");
new Date(2016,1,1); 2016年2月1日零点

 <script>

 /*创建一个时间对象*/

     var Now=new Date();

     console.log(Now);//Tue Sep 06 2016 14:47:44 GMT+0800 (中国标准时间-->CST)

 /*设置时间*/

     var date1=new Date('May 25,2024');//5月 24日 2014年

     console.log(date1);//Sat May 25 2024 00:00:00 GMT+0800 (中国标准时间)

     var date2=new Date("2016/10/01,10:10:11");//年月日，时分秒

     console.log(date2);//Sat Oct 01 2016 10:10:11 GMT+0800 (中国标准时间)

     var date3=new Date(2016,10,1,10,10,11,111);//年,月(10代表11月),日，时,分,秒,

     console.log(date3);//Tue Nov 01 2016 10:10:11 GMT+0800 (中国标准时间)

     //

 </script>

2、获取当前时区的时间

时间包括了多个信息，如何获取到其中的某一个信息呢？

--获取当前时间的方法

getFullYear(); 获取4位数的年份
getMonth(); 获取月份，从0~11，0表示1月，7表示8月
getDate(); 获取月份中的天数（日期）
getDay(); 获取星期几，0为星期日，6为星期六

getHours( ) 获取当前小时数
getMinutes( ) 获取当前分钟数
getSeconds( ) 获取当前秒数
getMilliseconds(); 获取当前的毫秒数
getTime(); 获取从1970年1月1日08:00:00到现在的毫秒数

--获取时间的方法代码：

<script>

/*获取时间的方法(Date对象没有属性)*/

    var now=new Date();

    console.log(now);//Sat Sep 10 2016 20:58:13 GMT+0800 (中国标准时间)

    console.log(now.getFullYear());//

    console.log(typeof now.getFullYear());//number

    console.log(now.getMonth());//月-8-->9

    console.log(now.getDate());//日-6

    console.log(now.getDay());//星期-2

    console.log(now.getHours());//时-20

    console.log(now.getMinutes());//分-58

    console.log(now.getSeconds());//秒-13

    console.log(now.getMilliseconds());//毫秒（0~999）

    console.log(now.getTime());//

</script>

3、设置当前时区的时间

setFullYear(); 设置4位数的年份
setMonth(); 设置月份，从0开始，0表示1月
setDate(); 设置月份中的天数
setHours(); 设置当前的小时数，0-23
setMinutes(); 设置当前的分钟数，0-59
setSeconds(); 设置当前的秒数，0-59
setMilliseconds(); 设置当前的毫秒数
setTime(); 向1970/1/1 添加毫秒数

<script>

    var con=document.getElementById('con');

    var now=new Date();

    console.log(now);//Tue Sep 06 2016 16:36:40 GMT+0800 (中国标准时间)

    now.setFullYear(2017);

    console.log(now);//Wed Sep 06 2017 16:37:05

    now.setMonth(6);

    console.log(now);//Thu Jul 06 2017 16:38:30

    now.setTime(1000*60*60);//1970年1月1号早上8点添加毫秒数

    console.log(now);//Thu Jan 01 1970 09:00:00

    var date1=new Date(1000*60*60);//当前时间+设置毫秒数

    console.log(date1);//Thu Jan 01 1970 09:00:00

</script>

4、UTC时间

UTC国际标准时间又称世界时间
以零经度线上的时间作为国际上统一采用的标准时间。因为零经度线通过英国格林尼治天文台，所以国际标准时间也称为格林尼治时间GMT。

当前北京时间=国际标准时间+8小时

4-1、获取UTC时区的时间

getUTCFullYear(); 获取UTC日期的4位数年份
getUTCMonth(); 获取UTC日期月份，从0开始
getUTCDate(); 获取UTC日期月份中的天数
getUTCDay(); 获取UTC日期的周几，从0开始
getUTCHours(); 获取UTC日期的小时数，0-23
getUTCMinutes(); 获取UTC日期的分钟数，0-59
getUTCSeconds(); 获取UTC日期的秒数，0-59
getUTCMilliseconds(); 获取UTC日期的毫秒数

4-2、设置UTC时区的时间

setUTCFullYear();设置UTC日期的4位数年份
setUTCMonth();设置UTC日期月份，从0开始
setUTCDate();设置UTC日期月份中的天数
setUTCHours();设置UTC日期的小时数，0-23
setUTCMinutes();设置UTC日期的分钟数，0-59
setUTCSeconds();设置UTC日期的秒数，0-59
setUTCMilliseconds();设置UTC日期的毫秒数

5、获取当前时间效果

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>获取当前时间</title>

 <style>

 *{color:red;}

 </style>

 </head>

 <body>

 <h1 id="con"></h1>

 <script>

     var con=document.getElementById('con');

     var timer=null;

     timer=setInterval(function(){

         var now=new Date();

         var year=now.getFullYear();

         var month=now.getMonth()+1;

         var date=now.getDate();

         var house=now.getHours();

         var minutes=now.getMinutes();

         var second=now.getSeconds();

         var millise=now.getMilliseconds();

         if(house<10){

             house='0'+house;

         }

         if(minutes<10){

             minutes='0'+minutes;

         }

         if(second<10){

             second='0'+second;

         }

         if(millise<10){

             millise='00'+millise;

         }else if(millise<100){

             millise='0'+millise;

         }

         con.innerHTML='北京时间：'+year+'年'+month+'月'+date+'号'+house+'时'+minutes+'分'+second+'秒'+millise+'毫秒';

     },1)

 </script>

 </body>

 </html>

6、倒计时效果

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>练习2-倒计时</title>

 <style>

 *{color:red;}

 </style>

 </head>

 <body>

 <h1>距离国庆节放假还剩：<span id="con"></span></h1>

 <h1>距离中秋节放假还剩：<span id="con2"></span></h1>

 <script>

     var con=document.getElementById('con');

     var con2=document.getElementById('con2');

     var guoq=new Date("2016/10/1,00:00:00");

     var zhq=new Date("2016/9/15,00:00:00");

     var end=guoq.getTime();

     var end2=zhq.getTime();

     var timer=null,timer2=null;

     timer=setInterval(function(){

         var str1='';

         var now=new Date();

         var start=now.getTime();

         var zong=end-start;

         var day=parseInt(zong/(1000*60*60*24));//获取商

         var _day=zong%(1000*60*60*24);//获取余数

         var hour=parseInt(_day/(1000*60*60));

         var _hour=_day%(1000*60*60);

         var minutes=parseInt(_hour/(1000*60));

         var _minutes=_hour%(1000*60);

         var seconds=parseInt(_minutes/1000);

         var millis=_minutes%1000;

         str1=day+'天'+hour+'小时'+minutes+'分钟'+seconds+'秒'+millis+'毫秒'

         con.innerHTML=str1;

     },1)

     timer2=setInterval(function(){

         var str1='';

         var now=new Date();

         var start=now.getTime();

         var zong=end2-start;

         var day=parseInt(zong/(1000*60*60*24));//获取商

         var _day=zong%(1000*60*60*24);//获取余数

         var hour=parseInt(_day/(1000*60*60));

         var _hour=_day%(1000*60*60);

         var minutes=parseInt(_hour/(1000*60));

         var _minutes=_hour%(1000*60);

         var seconds=parseInt(_minutes/1000);

         var millis=_minutes%1000;

         str1=day+'天'+hour+'小时'+minutes+'分钟'+seconds+'秒'+millis+'毫秒'

         con2.innerHTML=str1;

     },1)

 </script>

 </body>

 </html>

好友链接地址有些效果可以看看： https://www.cnblogs.com/duenyang/

相关文章