- 以日期对象为中心,展开对对象的属性方法的使用。以及渲染到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
}
最后展示的结果