1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>小时钟</title>
    6.     <!-- IMPORT CSS -->
    7.     <style>
    8.         * {
    9.             margin: 0;
    10.             padding: 0;
    11.         }
    12.         #clockBox {
    13.             position: absolute;
    14.             right: 0;
    15.             top: 0;
    16.             padding: 0 15px;
    17.             line-height: 70px;
    18.             font-size: 24px;
    19.             color: darkred;
    20.             /* 设置背景渐变色 */
    21.             background: lightblue;
    22.             background: -webkit-linear-gradient(top left, lightblue, lightcoral, lightcyan);
    23.         }
    24.     </style>
    25. </head>
    27. <body>
    28.     <div id="clockBox">
    29.         2019年07月26日 星期五 10:25:03
    30.     </div>
    32.     <!-- IMPORT JS -->
    33.     <script>
    34.         let clockBox = document.getElementById('clockBox');
    36.         /* 
    37.          * addZero:不足十补充零
    38.          *   @params
    39.          *      val 需要处理的值
    40.          *   @return
    41.                  处理后的结果（不足十位的补充零）
    42.          * by Team on 2019/07/26
    43.          */
    44.         function addZero(val) {
    45.             val = Number(val);
    46.             return val < 10 ? '0' + val : val;
    47.         }
    49.         /* 
    50.          * queryDate:获取当前的日期，把其转换为想要的格式
    51.          *   @params
    52.          *   @return
    53.          * by Team on 2019/07/26
    54.          */
    55.         function queryDate() {
    56.             // 1.获取当前日期及详细信息
    57.             let time = new Date(),
    58.                 year = time.getFullYear(),
    59.                 month = time.getMonth() + 1,
    60.                 day = time.getDate(),
    61.                 week = time.getDay(),
    62.                 hours = time.getHours(),
    63.                 minutes = time.getMinutes(),
    64.                 seconds = time.getSeconds();
    65.             let weekAry = ['日', '一', '二', '三', '四', '五', '六'];
    66.             // 2.拼凑成我们想要的字符串
    67.             let result = year + "年" + addZero(month) + "月" + addZero(day) + "日";
    68.             result += " 星期" + weekAry[week] + " ";
    69.             result += addZero(hours) + ":" + addZero(minutes) + ":" + addZero(seconds);
    70.             // 3.把处理好的结果放到盒子中
    71.             clockBox.innerHTML = result;
    72.         }
    74.         // 加载页面执行方法
    75.         queryDate();
    77.         // 定时器控制运动：设置一个 setInterval 定时器（到达指定时间干什么事情的东西就是定时器），每隔1000MS 执行 queryDate 方法
    78.         setInterval(queryDate, 1000);
    79.     </script>
    80. </body>
    81. </html>