• [JS]笔记13之Date对象


    -->获取与设置时间的方法
    -->使用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日零点

     1 <script>
     2 /*创建一个时间对象*/
     3     var Now=new Date();
     4     console.log(Now);//Tue Sep 06 2016 14:47:44 GMT+0800 (中国标准时间-->CST)
     5 /*设置时间*/
     6     var date1=new Date('May 25,2024');//5月 24日 2014年
     7     console.log(date1);//Sat May 25 2024 00:00:00 GMT+0800 (中国标准时间)
     8     var date2=new Date("2016/10/01,10:10:11");//年月日,时分秒
     9     console.log(date2);//Sat Oct 01 2016 10:10:11 GMT+0800 (中国标准时间)
    10     var date3=new Date(2016,10,1,10,10,11,111);//年,月(10代表11月),日,时,分,秒,
    11     console.log(date3);//Tue Nov 01 2016 10:10:11 GMT+0800 (中国标准时间)
    12     //
    13 </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());//2016
        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());//1473512293715
    </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、获取当前时间效果 

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>获取当前时间</title>
     6 <style>
     7 *{color:red;}
     8 </style>
     9 </head>
    10 <body>
    11 <h1 id="con"></h1>
    12 <script>
    13     var con=document.getElementById('con');
    14     var timer=null;
    15     timer=setInterval(function(){
    16         var now=new Date();
    17         var year=now.getFullYear();
    18         var month=now.getMonth()+1;
    19         var date=now.getDate();
    20         var house=now.getHours();
    21         var minutes=now.getMinutes();
    22         var second=now.getSeconds();
    23         var millise=now.getMilliseconds();
    24         if(house<10){
    25             house='0'+house;
    26         }
    27         if(minutes<10){
    28             minutes='0'+minutes;
    29         }
    30         if(second<10){
    31             second='0'+second;
    32         }
    33         if(millise<10){
    34             millise='00'+millise;
    35         }else if(millise<100){
    36             millise='0'+millise;
    37         }
    38         con.innerHTML='北京时间:'+year+'年'+month+'月'+date+'号'+house+'时'+minutes+'分'+second+'秒'+millise+'毫秒';
    39     },1)
    40 </script>
    41 </body>
    42 </html>

    6、倒计时效果

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>练习2-倒计时</title>
     6 <style>
     7 *{color:red;}
     8 </style>
     9 </head>
    10 <body>
    11 <h1>距离国庆节放假还剩:<span id="con"></span></h1>
    12 <h1>距离中秋节放假还剩:<span id="con2"></span></h1>
    13 <script>
    14     var con=document.getElementById('con');
    15     var con2=document.getElementById('con2');
    16     var guoq=new Date("2016/10/1,00:00:00");
    17     var zhq=new Date("2016/9/15,00:00:00");
    18     var end=guoq.getTime();
    19     var end2=zhq.getTime();
    20     var timer=null,timer2=null;
    21     timer=setInterval(function(){
    22         var str1='';
    23         var now=new Date();
    24         var start=now.getTime();
    25         var zong=end-start;
    26         var day=parseInt(zong/(1000*60*60*24));//获取商
    27         var _day=zong%(1000*60*60*24);//获取余数
    28         var hour=parseInt(_day/(1000*60*60));
    29         var _hour=_day%(1000*60*60);
    30         var minutes=parseInt(_hour/(1000*60));
    31         var _minutes=_hour%(1000*60);
    32         var seconds=parseInt(_minutes/1000);
    33         var millis=_minutes%1000;
    34         str1=day+'天'+hour+'小时'+minutes+'分钟'+seconds+'秒'+millis+'毫秒'
    35         con.innerHTML=str1;
    36     },1)
    37     timer2=setInterval(function(){
    38         var str1='';
    39         var now=new Date();
    40         var start=now.getTime();
    41         var zong=end2-start;
    42         var day=parseInt(zong/(1000*60*60*24));//获取商
    43         var _day=zong%(1000*60*60*24);//获取余数
    44         var hour=parseInt(_day/(1000*60*60));
    45         var _hour=_day%(1000*60*60);
    46         var minutes=parseInt(_hour/(1000*60));
    47         var _minutes=_hour%(1000*60);
    48         var seconds=parseInt(_minutes/1000);
    49         var millis=_minutes%1000;
    50         str1=day+'天'+hour+'小时'+minutes+'分钟'+seconds+'秒'+millis+'毫秒'
    51         con2.innerHTML=str1;
    52     },1)
    53 </script>
    54 </body>
    55 </html>

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

  • 相关阅读:
    jsp <img src="“> src 相对路径的问题
    记一次Intellij-IDEA配置JDK1.8,支持Lambda新特性
    centOS6.5 查看 启动 关闭防火墙
    java设计模式之--工厂方法模式
    BlockingQueue之---ArrayBlockingQueue
    两个线程,一个为123456,一个为ABCDEF、交替打印出1A2B3C...
    JUC之---超好用的阻塞锁
    JUC之---读写锁
    java设计模式之--代理模式
    java设计模式之--线程安全的单例模式
  • 原文地址:https://www.cnblogs.com/paulirish/p/date.html
Copyright © 2020-2023  润新知