js源码实现-日期展示

129 阅读1分钟
  • 以日期对象为中心,展开对对象的属性方法的使用。以及渲染到DOM上。
  • 对星期显示的的处理,以及补0的实现。
  function $getId(id){
            return id && typeof id ==="string" ? document.getElementById(id):null 
        }
       
        let nowTimeDiv = $getId('nowTime');
        let nowDayDiv = $getId('nowDay');
        
        // 定时器执行时间
        setInterval(nowDate, 10)

        // 处理当前时间函数
        function nowDate(){
            let dateObj = new Date();
            // console.log('当前时间',dateObj);
            // 获取当前日期的年月日
            let year = dateObj.getFullYear();
            let mouth = dateObj.getMonth()+1;
            let day = dateObj.getDate(); // 日
            let week = dateObj.getDay(); // 星期
            let hours = dateObj.getHours();
            let minutes = dateObj.getMinutes();
            let seconds = dateObj.getSeconds();
            let weekArray = ['星期日', '星期一', '星期二' ,'星期三', '星期四', '星期五', '星期六']
            let ap= 'AM';
            if(hours>12){
                ap="PM";
                hours -=12;
                hours===12? 0:hours; 
            }else{
                ap="AM";
            }
            // 当前日期
            let temp = `${year}/${zero(mouth)}/${zero(day)} ${weekArray[week]}`;
            nowTimeDiv.innerHTML = temp;
            // 当前时间时分
            let time = `${zero(hours)}:${zero(minutes)} ${zero(seconds)} - ${ap}`;
            nowDayDiv.innerHTML = time;
        }
        // 日期补0函数 
        function zero(str){
            str = str+'';
            return str.length===1 ? '0'+ str : str
        }

最后展示的结果