1. 日期对象的基本操作

 let time = new Date();
        /* 
            获取当前客户端 (本机电脑) 本地的时间
                这个事件用户是可以自己修改的, 所以不能作为重要的参考依据

            Fri Jul 26 2019 10:02:17 GTM+0800 (中国标准事件) 
            GTM+0800 东八区
            获取的结果不是字符串,是对象数据类型, 属于日期对象(或者说是 Date这个类的实例对象)
        */
   typeof time; // => 'object'

2. 常用日期属性和方法

标准日期对象中提供了一些属性和方法, 供我们操作日期信息

getFullYear( ) 获取年
getMonth( ) 获取月
- 结果是 0 ~ 11 代表第一月到第十二月
getDate( ) 获取日
getDay( ) 获取星期
- 结果是 0 ~ 6 代表周日到周六
getHours( ) 获取时
getMinutes( ) 获取分
getSeconds( ) 获取秒
getMilliSeconds( ) 获取毫秒
getTime( ) 获取当前日期距离 1970 / 1 / 1 00 : 00 : 00 这个日期之间的毫秒差
- 做时间比较时, 会用到getTime( ) , 作差比大小
toLocaleDateString ( ) 获取年月日 (字符串)
toLocaleString ( ) 获取完整的日期字符串

3. 案例之小时钟

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小时钟</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #clockBox {
            position: absolute;
            right: 0;
            top: 0;
            padding: 0 15px;
            line-height: 80px;
            font-size: 24px;
            color: darkred;
            /* 设置背景渐变色 */
            background: lightblue;
            /* 上面这行是考虑到兼容性的问题,如果不兼容就显示单色即可 */
            background: -webkit-linear-gradient(top left, lightblue, lightcoral, lightcyan);
        }

    </style>
</head>

<body>
    <div id="clockBox">
        
        2019年07月26日 星期五 10:25:03
    </div>
    <script>
        let clockBox = document.getElementById('clockBox');

        /* 
            queryDate: 获取当前日期,把其转换为想要的格式
                @ params
                @ return
            by Ark on 2019/7/26
        */
        function queryDate() {
            // 1. 获取当前日期及详细信息
            let time = new Date(),
                year = time.getFullYear(),
                month = time.getMonth() + 1,
                day = time.getDate(),
                week = time.getDay(),
                hours = time.getHours(),
                minutes = time.getMinutes(),
                seconds = time.getSeconds();
            // 2. 拼凑成想要的字符串
            //思考: week中 0-6 可以视为索引 数组的项就放汉字一到日
            let weekAry = ['日', '一', '二', '三', '四', '五', '六']
            let result = year + '年' + addZero(month) + '月' + addZero(day) + '日';
            result += ' 星期' + weekAry[week] + ' ';
            result += addZero(hours) + ':' + addZero(minutes) + ':' + addZero(seconds);

            // 3. 不足十位补零
            /* 
                addZero: 不足十位补零
                @ params
                    val 需要处理的值 [number]
                @ return
                    处理后的结果 [string]
                by Ark on 2019/7/26
            */
           // 函数之所以可以写在这里还生效,是因为变量提升
            function addZero(val) {
                val = Number(val);
                return val < 10 ? '0' + val : val;
            };

            // 4. 把处理好的节骨放到盒子中
            clockBox.innerHTML = result;
            return result
        }
        // 加载页面执行方法
        queryDate();
        // 定时器控制运动: setInterval设置一个定时器(到达指定时间干什么事)
        setInterval(queryDate,1000)
    </script>
</body>

</html>

第一篇 JS语言基础之Date 日期对象

1. 日期对象的基本操作

2. 常用日期属性和方法

3. 案例之小时钟