js-显示当前时间

此文章主要记录如何将当前时间显示到html中，并每秒刷新时间

首先实现简单的布局,主要用来显示时间

<style>
   #time {
     height: 200px;
     background: #ccc;
     text-align: center;
     line-height: 200px;
     color: darkturquoise;
     font-size: 50px;
   }
</style> 
<div id="time">
        显示时间
</div>

接下来是js实现代码

  function timer() {
            // 获取时间
            let date = new Date();
            // 获取年份
            let year = date.getFullYear();
            // 月 0-11
            let month = date.getMonth();
            month = addL(month + 1);
            // 日
            let day = date.getDate();
            day = addL(day);
            // 时
            let hours = date.getHours();
            hours = addL(hours);
            // 分
            let minute = date.getMinutes();
            minute = addL(minute);
            // 秒
            let second = date.getSeconds();
            second = addL(second);
            // 星期 0-6
            let week = date.getDay();
            weekDay = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            week = weekDay[week];


            document.getElementById("time").innerHTML = `${year}-${month}-${day} ${hours}:${minute}:${second} ${week}`;
        }
        //首先调用一次函数，在设置时间戳，防止页面加载时是空白
        timer();
        setInterval(timer, 1000);

        //加0方法  对小于10的数字添加0后返回字符串
        function addL(dateNum) {
            if (dateNum < 10) {
                return '0' + dateNum;
            }
            return dateNum;
        }