JavaScript 08 Date

作者: 小五丶_ | 来源:发表于2019-12-30 10:58 被阅读0次

    一、Date对象

    什么是Date对象?

    Date对象用于处理日期和时间,Date对象记录着从1970年1月1日00:00:00开始以来的毫秒数。(也就是格林威治时间)

    至于什么是格林威治事件,欢迎大家去看我的另一篇文章

    浅谈格林威治时间和时间戳-小五技术blog

    Date  是一个构造函数

    1、获取当前时间 (北京时间)   不传参数

    var d = new Date();

    console.log(d);       // Thu Dec 05 2018 23:38:54 GMT+0800 (中国标准时间)

    2、设置时间   

          1).  传一个时间格式的字符串   "2018-11-11 00:00:00:111"   =>  (中国格式的时间)   

    var date = new Date("2018-11-11 00:00:00:111");   // 我们比较熟悉  但是一旦格式出错返回无效日期

    console.log(date);    Mon Nov 11 2018 00:00:00 GMT+0800 (中国标准时间)

    var date = new Date("2018-13-11 00:00:00:111");     //  传入不存在的日期

    console.log(date);     //Invalid Date   无效日期 

           2). 多参数传参 用逗号分隔    =>  外国格式的时间  (月份 从0开始 0-11月, 一周的 第一天 从 星期天开始 0-6 )

        var date = new Date(2018, 11, 11, 0, 0, 0);   // 2018 12 11  

        console.log(date);    // Tue Dec 11 2018 00:00:00 GMT+0800 (中国标准时间)

        如果时间超出范围  会自动进行换算

        月份(0-11) 超出向下一个年换算   

        var date = new Date(2018, 13, 11, 0, 0, 0);  

        console.log(date); //2018-13-11 => 2019-2-11

        日期超出向下一个月换算

        var date = new Date(2018, 11, 32, 0, 0, 0);   

        console.log(date);    // 2018-12-32 => 2019-1-1

        日期为0  或者为 负数  向上个月换算

      var date = new Date(2018, 11, 0, 0, 0, 0);   // 2018-12-0 => 2019-11-30

        console.log(date);

        // -1 0 1

        var date = new Date(2018, 11, -1, 0, 0, 0);   // 2018-12-(-1) => 2019-11-29

        console.log(date);

         3).  传一个数字(毫秒数)

        var date = new Date(36000);

        console.log(date);    // Thu Jan 01 1970 08:00:36 GMT+0800 (中国标准时间)

         4).  传一个日期对象(和第三种方法类似)      得到一个与原日期相同的新的日期(对象)

        var date = new Date();

        var d1 = new Date(date);

        console.log(date);    // Thu Dec 05 2018 23:54:40 GMT+0800 (中国标准时间)

        console.log(d1);        // Thu Dec 05 2018 23:54:40 GMT+0800 (中国标准时间)

        console.log(d1 === date);    // false

    3、日期对象转毫秒

         1. 隐式类型转化(- * / %)

        var date = new Date(2018, 10, 11, 0, 0, 0);

        var ms = date * 1;   

        console.log(ms);    // 1541865600000

        var d1 = new Date(ms);    

        console.log(d1);    // Sun Nov 11 2018 00:00:00 GMT+0800 (中国标准时间)

    二、日期对象的拓展方法

    var date = new Date("2018-11-11 0:0:0");

    console.log(date);    // Sun Nov 11 2018 00:00:00 GMT+0800 (中国标准时间)

     1、获取

      获取年份

        var year = date.getFullYear();

        console.log(year);   //2018

        var month = date.getMonth();   

        console.log(month);    // 10  =>  始终是外国格式的月份

       获取日期

    var day = date.getDate();

    console.log(day);    // 11

        获取星期 

    var week = date.getDay();

    console.log(week);    // 0 (星期日)

        获取 hour    小时

    var hour = date.getHours();

    console.log(hour); // 0

        获取 minute    分钟

    var minute = date.getMinutes();

    console.log(minute);    // 0

        获取 second    

    var second = date.getSeconds();

    console.log(second);    // 0

        获取 millisecond     毫秒

    var millisecond = date.getMilliseconds();

    console.log(millisecond);    // 0

        获取日期对应毫秒数

        var ms = date.getTime();

        console.log(ms);    1541865600000

        console.log(date * 1);    1541865600000

    2、设置

        var date = new Date("2018-11-11 0:0:0");

        console.log(date);

        返回值   都是  更新之后的时间的毫秒数

        是否影响原日期  都会  影响

        设置年份

        返回值  设置年份之后时间的毫秒数

        是否影响原日期   影响

        var result = date.setFullYear(2022);

        console.log(result);    //1668096000000

        console.log(date);    // Fri Nov 11 2022 00:00:00 GMT+0800 (中国标准时间)

        设置月份

        返回值  更新之后需时间的毫秒数

        是否影响原日期   影响

        var result = date.setMonth(13);

        console.log(result);    // 1549814400000

        console.log(date);    // Mon Feb 11 2019 00:00:00 GMT+0800 (中国标准时间)

        设置日期

        常规设置

        date.setDate(11);

        console.log(date);    // Sun Nov 11 2018 00:00:00 GMT+0800 (中国标准时间)

        特殊设置

        date.setDate(0);    // 上个月的最后一天

        console.log(date);    // Wed Oct 31 2018 00:00:00 GMT+0800 (中国标准时间)

        date.setDate(32);   //下个月的第一天或第二天

        console.log(date);     // Thu Nov 01 2018 00:00:00 GMT+0800 (中国标准时间)

        注意  星期  只能获取  不能设置

        date.setHours(18);

        console.log(date);    Sun Nov 11 2018 18:00:00 GMT+0800 (中国标准时间)

        date.setMinutes(30);

        date.setSeconds(30);

        date.setMilliseconds(111);

        console.log(date);

         3、日期的深复制

        var d1 = new Date(date);  //新日期

        d1.setMonth(11);

        console.log(d1);    // Tue Dec 11 2018 00:00:00 GMT+0800 (中国标准时间)

        console.log(date);   // Sun Nov 11 2018 00:00:00 GMT+0800 (中国标准时间)

    修改深复制后的新日期对象,不会再影响之前的日期对象

    三、案例

    我会把小案例直接放在博客里,稍微有意思的复杂的案例我会放在博客的实例里

    简易时钟

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>Document</title>

    </head>

    <body>

        <div id="showTime"></div>

    </body>

    <script>

        var showTime = document.getElementById("showTime")

        getTime();

        var timer = setInterval(function () {

            getTime();

        }, 1000)

        function getTime() {

            var date = new Date();

            var year = date.getFullYear();

            var month = date.getMonth() + 1;  // 月份 日期  小时  分钟和 秒 小于 10 的时候手动拼接0

            month = beautify(month);

            var day = date.getDate();

            day = beautify(day);

            var week = date.getDay();  //星期天  取值为 0

            var hour = date.getHours();

            hour = beautify(hour);

            var minute = date.getMinutes();

            minute = beautify(minute);

            var second = date.getSeconds();

            second = beautify(second);

            var weekList = ["日", "一", "二", "三", "四", "五", "六"];

            showTime.innerHTML = year + "年" + month + "月" + day + "日星期" + weekList[week] + " " + hour + ":" + minute + ":" + second;

        }

        function beautify(num) {

            return num = (num < 10 ? "0" + num : num);

        }

    </script>

    </html>

    相关文章

      网友评论

        本文标题:JavaScript 08 Date

        本文链接:https://www.haomeiwen.com/subject/kvlebctx.html