zoukankan      html  css  js  c++  java
  • js之数据类型(对象类型——构造器对象——日期)

      Date对象是js语言中内置的数据类型,用于提供日期与时间的相关操作。学习它之前我们先了解一下什么是GMT,什么时UTC等相关的知识。

      GMT: 格林尼治标准时间(Greenwich Mean Time,GMT)是指位于伦敦郊区的皇家格林尼治天文台的标准时间,因为本初子午线被定义在通过那里的经线。 理论上来说,格林尼治标准时间的正午是指当太阳横穿格林尼治子午线时的时间。由于地球在它的椭圆轨道里的运动速度不均匀,这个时刻可能和实际的太阳时相差16分钟。 地球每天的自转是有些不规则的,而且正在缓慢减速。所以,格林尼治时间已经不再被作为标准时间使用.

      UTC:UTC是以原子时秒长为基础,在时刻上尽量接近于世界时的一种时间计量系统。又称协调世界时、世界统一时间、世界标准时间、国际协调时间。UTC才是目前应用的真正的精准的标准时间。

      日期时间完整格式:YYYY-MM-DDTHH:mm:ss.sssZ

      闰年:年分为闰年(366天)和平年(365)天。闰年的定义是可以被4整除且不可被100整除,四年一闰,百年不闰,四百年再闰。

      时分秒:1天=24时=24*60(1440)分=24*60*60(86400)秒=86400000毫秒。

      下面先来看Date对象的三个静态方法:Date.now(), Date.parse(), Date.UTC().它们不通过Date实例对象而是通过Date()构造函数本身调用。

      Date.now():返回自1970-11 00:00:00 UTC到当前时间的毫秒数(返回的是Number类型)。它不支持传递参数。

      Date.parse():解析一个表示某个日期的字符串,并返回从1970-1-1 00:00:00 UTC 到该日期对象(该日期对象的UTC时间)的毫秒数,如果该字符串无法识别,或者一些情况下,包含了不合法的日期数值,则返回值为NaN。

      Date.UTC():返回给定日期的毫秒数,但其参数并不是一个字符串,而是分别代表年、月、日、时、分、秒、毫秒的数字参数

        <script>
            console.log(Date.now());   //1574838090727
            console.log(Date.parse('6/11/2019')); //1560182400000
            console.log(Date.parse('2015-02-31'));//1425340800000
            console.log(Date.parse('January 12,2004'));//1073836800000
            console.log(Date.parse()); //NaN
            console.log(Date.UTC.length); //7
            console.log(Date.UTC(2019, 11, 27, 00, 00, 00)); //1577404800000
        </script>

      创建日期对象

        new Date()       创建一个跟日期有关系的对象

        new Date()  可以接收参数      

          当没有参数时,它是以本机的时间做为参考,创建一个日期对象;

          new Date(年,月,日,时,分,秒)参数是数字,每个参数用逗号隔开,注意参数是可以省略的,省略的部分会取一个默认值0(日期的默认值为1);

          new Date('june 10,2019 12:12:12')参数是字符串,外国人常用;

          new Date(时间戳) 参数是时间戳,时间戳是从1970年1月1日0时0分0秒到指定一个时间点之间的毫秒数

            new.Date().getTime()注意:拿到的date对象只是本机的时间,修改的是date对象的日期,而不是本机的日期,本机的日期只能获取不能修改。

        <script>
            var d1 = new Date();
            console.log(d1);  //Wed Nov 27 2019 15:55:23 GMT+0800 (中国标准时间)
    
            var d2 = new Date(2019, 03);
            console.log(d2);  //Mon Apr 01 2019 00:00:00 GMT+0800 (中国标准时间)
    
            var d3 = new Date('june 10,2019 12:12:12');
            console.log(d3);  //Mon Jun 10 2019 12:12:12 GMT+0800 (中国标准时间)
    
            var d4 = new Date(new Date().getTime());
            console.log(d4);  //Wed Nov 27 2019 16:01:19 GMT+0800 (中国标准时间)
        </script>

        Date对象没有可以直接读写的属性,所有对日期和时间的访问都是需要通过方法。Date对象的大多数方法分为两种形式:一种是使用本地时间,一种是使用UTC时间。如下:

      to类:方法从Date对象返回一个字符串,表示指定的时间(9个)

        日期对象.toString():返回本地时区的日期字符串

        日期对象.toUTCString(): 返回UTC时间的日期字符串

        日期对象.toISOString(): 返回Date对象的标准的日期时间字符串格式的字符串

        日期对象.toDateString(): 返回Date对象的日期部分的字符串

        日期对象.toJSON():返回一个符合JSON格式的日期字符串,与toISOString方法的返回结果完全相同

        日期对象.toTimeString(): 返回Date对象的时间部分的字符串

        日期对象.toLocaleDateString():  toDateString()方法的本地化转换

        日期对象.toLocaleString(): toString()方法的本地化转换

        日期对象.toLocaleTimeString(): toTimeString()方法的本地化转换 

        <script>
            console.log(new Date('2019-11-27').toString());    //Wed Nov 27 2019 08:00:00 GMT+0800 (中国标准时间)
            console.log(new Date('2019-11-27').toUTCString());  //Wed, 27 Nov 2019 00:00:00 GMT
            console.log(new Date('2019-11-27').toISOString());  //2019-11-27T00:00:00.000Z
            console.log(new Date('2019-11-27').toDateString()); //Wed Nov 27 2019
            console.log(new Date('2019-11-27').toJSON());     //2019-11-27T00:00:00.000Z
            console.log(new Date('2019-11-27').toTimeString());      //08:00:00 GMT+0800 (中国标准时间)
            console.log(new Date('2019-11-27').toLocaleDateString());   //2019/11/27
            console.log(new Date('2019-11-27').toLocaleString());     //2019/11/27 上午8:00:00
            console.log(new Date('2019-11-29').toLocaleTimeString());  //上午8:00:00
        </script>

      get类:获取日期对象的一些方法

          日期对象.valueOf(): 返回距离1970年1月1日0点的毫秒数(这个方法通常在js内容被调用,而不是在代码中显式调用).

        <script>
           var d1=new Date('Wed Nov 27 2019');
           console.log(d1.valueOf());  //1574784000000
        </script> 

        日期对象.getFullYear():     获取年

        日期对象.getMonth():     获取月(月份从0开始计算);

        日期对象.getDate():         获取日

        日期对象.getDay():        获取星期(星期从周日开始,从0开始,0为周日);

        日期对象.getHours():     获取小时

        日期对象.getMinutes():       获取分钟

        日期对象.getSeconds():     获取秒钟

        日期对象.getMillSeconds():  获取毫秒

        日期对象.getTime():      获取19070-01-01 00:00:00到目前日期对象的时间差 单位:ms

      例子:数字版时时钟

        <div id="dateBox"></div>
        <script>
            window.onload = function () {
                var dateBox = document.getElementById('dateBox');
    
                function time() {
                    var d = new Date();
                    dateBox.innerHTML = '' + d.getFullYear() + ''
                        + format(d.getMonth() + 1) + ''
                        + format(d.getDate()) + '号星期'
                        + formatWeek(d.getDay()) + ''
                        + format(d.getHours()) + ''
                        + format(d.getMinutes()) + ''
                        + format(d.getSeconds()) + '';
                }
                function format(v) {
                    return v < 10 ? '0' + v : '' + v;
                }
                function formatWeek(v) {
                    return ['', '', '', '', '', '', ''][v];
                }
                setInterval(time, 1000);
            }
        </script>

      set类:日期对象不仅可以获取还可以对它进行设置,修改的是日期对象的值而不是真正的时间。

        日期对象.setFullYear():     获取年

        日期对象.setMonth():     获取月(月份从0开始计算);

        日期对象.setDate():         获取日

        日期对象.setHours():     获取小时

        日期对象.setMinutes():       获取分钟

        日期对象.setSeconds():     获取秒钟

        日期对象.setMillSeconds():  获取毫秒

        日期对象.setTime():     设置时间戳

        注意:设置日期里没有设置星期,因为设置了年,月,日后就知道是星期几了,星期只能获取不能设置。

      案例1: 这个月有多少天?这个月的第一天是星期几?今天是今年的第几周? 

        <script>
            //这个月的天数
            var d1 = new Date();
            d1.setMonth(d1.getMonth() + 1);
            d1.setDate(0); //把月份设置成下个月后,把日期设置成0,因为没有0号,所以自动进行回滚到上个月的最后一天
            console.log(d1);  //Sat Nov 30 2019 10:34:50 GMT+0800 (中国标准时间)
    
            //这个月初是周几
            var d2 = new Date();
            d2.setDate(1);//把这个参数设为1就会回到这个月的第一天
            console.log(d2.getDay());  //5
    
            //今天是今年的第几周    
            var d3 = new Date();
            var n = 0;            //用来存储周数
            var firstDay = new Date(2019, 0, 1).getDay(); //获取今年的第一天是周几
            var today = d3.getDay(); //获取今天是周几
    
            while (d3.getFullYear() == 2019) {
                n++;
                d3.setDate(d3.getDate() - 7); //今天的日期对象减7,然后进行重设
            }
    
            //今天的星期如果比今年的第1天星期要小,那么就会少一周,因为不断减到最后的话会跳到上一年,这时候while的条件就不满足,那n就会少加1次。
          所以会有以下的比较:今天的星期比今年第一天的星期要小,就让n加上一个1
    if (today < firstDay) { n++; } console.log(n); //48 </script>

      案例2:历史上的今天是周几?

    <body>
        <script>
            window.onload = function () {
                var year = document.getElementById('year');
                var month = document.getElementById('month');
                var day = document.getElementById('day');
                var week = document.getElementById('week');
                var d = new Date();
                var oldDate = new Date();
    
                //生成年
                var yearStr = '';
                for (var i = 2050; i >= 1900; i--) {
                    yearStr += '<option>' + i + '</option>';
                }
                year.innerHTML = yearStr;
                year.value = d.getFullYear();
    
                //生成月
                var monthStr = '';
                for (var i = 12; i >= 1; i--) {
                    monthStr += '<option>' + i + '</option>';
                }
                month.innerHTML=monthStr;
                month.value = d.getMonth() + 1;
    
                //生成日
                createDay();
                function createDay() {
                    //现在需要根据用户选择的年份,月份去设置日期,设置完日期后,那个月的天数就有了
                    d.setFullYear(year.value);//框中年份
                    d.setMonth(month.value);//框中月份
                    d.setDate(0);
                    var totalDay = d.getDate();//代表这个月的最后一天,要根据这个来生成日
    
                    var dayStr = '';
                    for (var i = 1; i <= totalDay; i++) {
                        dayStr += '<option>' + i + '</option>'
                    }
                    day.innerHTML = dayStr;
                    day.value = oldDate.getDate();//这个地方要的是最开始的d
    
                    //星期的变化放在下面
                    d.setDate(day.value);//设置今天的日期
                    week.innerHTML = formatWeek(d.getDay());
                    console.log(d);
                }
                function formatWeek(v) {
                    return ['', '', '', '', '', '', ''][v];
                }
    
                //调用
                year.onchange = function () {
                    createDay();
                }
                month.onchange = function () {
                    createDay();
                }
                day.onchange = function () {
                    d.setFullYear(year.value);
                    d.setMonth(month.value - 1);
                    d.setDate(this.value);
    
                    week.innerHTML = formatWeek(d.getDay());
                }
            }
        </script>
        <select name="" id="year"></select><select name="" id="month"></select><select name="" id="day"></select>日
        星期<span id="week"></span>
    </body>

      案例3:倒计时

    <body>
        <script>
            function cutDown(target) {
                //获取当前的时间
                var currentDate = new Date();
                var v = Math.abs(target - currentDate);    //传进来的时间与现在的时间之间的差(毫秒数)
    
                //把毫秒转成对应的天、时、分、秒
                return {
                    d: parseInt(v / (24 * 3600000)),
                    h: parseInt(v % (24 * 3600000) / 3600000),
                    m: parseInt(v % (24 * 3600000) % 3600000 / 60000),
                    s: parseInt(v % (24 * 3600000) % 3600000 % 60000 / 1000)
                };
            }
            window.onload = function () {
                var d1 = document.getElementById("d1");
                var d2 = document.getElementById("d2");
    
                var target1 = new Date(2020, 0, 1);
                var target2 = new Date(2019, 0, 1);
    
                setInterval(function () {
                    d1.innerHTML = '离2020年1月1号还有' + cutDown(target1).d + '' + cutDown(target1).h + '' 
                         + cutDown(target1).m + '' + cutDown(target1).s + ''; d2.innerHTML = '2019年1月1号已经过了' + cutDown(target2).d + '' + cutDown(target2).h + ''
                        + cutDown(target2).m + '' + cutDown(target2).s + ''; }, 1000); } </script> <div id="d1"></div> <div id="d2"></div> </body>

     

     

     

  • 相关阅读:
    .Net Mvc 基于Filter实现对权限的扩展定制
    VS 2015 远程调试
    SVN 创建版本库
    .NET 调用支付宝沙箱接口
    selenium常用总结
    Python常用小技巧
    Centos7 安装Mysql 5.7
    Sqlserver 递归查询
    Sqlserver 中case when 的详细用法总结
    Asp.NetCoreWebApi入门
  • 原文地址:https://www.cnblogs.com/davina123/p/11929023.html
Copyright © 2011-2022 走看看