JS-从简单到复杂的做一个时钟（学习过程）

倔强的青铜崽

已于 2024-01-31 19:02:21 修改

阅读量528

点赞数 10

分类专栏：零零碎碎、点点滴滴文章标签：学习笔记 javascript

于 2024-01-31 16:02:42 首次发布

本文链接：https://blog.csdn.net/Zertuler/article/details/135898764

版权

零零碎碎、点点滴滴专栏收录该内容

6 篇文章 0 订阅

订阅专栏

以前随意写了两篇时钟的代码，现在想删掉，重新写一篇较为完整的，但看到有几个收藏，就有点不好意思，就先留着吧，最近这段时间，我学习了很多大佬写的时钟代码，就整合一起，发出来分享，这也是我的学习笔记，也希望大佬们看到，给些指点。

获取时间的方法是 new Date()

获取年：getFullYear()

获取月：getMonth() 获取的月份是从0开始的，所以需要 +1

获取日：getdate()

获取星期：getDay()

获取时：getHours()

获取分：getMinutes()

获取秒：getSeconds()

需要使用定时器 setInterval(代码 , 毫秒数);

<div class="times"></div>
或者是：
<div id="times"></div>

//示例
setInterval(function(){
    let times = new Date();
    let year = times.getFullYear();
    let month = times.getMonth() + 1;
    let date = times.getDate();
    let day = times.getDay();
    let hour = times.getHours();
    let minute = times.getMinutes();
    let second = times.getSeconds();

    let showTime = year + '年' + month + '月' + date + '日' + '&nbsp' + '星期' + day + '&nbsp' + hour +'时' + minute + '分' + second + '秒'
    document.querySelector('.times').innerHTML = showTime;
    //.time是div里的class名
    //如果div里用的是id而不是class，则用这句：
    //document.getElementById("times").innerHTML = showTime;
    
},1000);
//网页显示结果2024年1月8日 星期1 17时25分1秒

显示的时间格式也可以换成其他样式：

//例：
let showTime = year + '-' + month + '-' + date +'&nbsp' + '星期' + day +'&nbsp' + hour +':' + minute + ':' + second;
//网页显示结果 2024-1-8 星期1 17:38:47

//下面这个写法其实跟上面的没什么区别，就是把一句话拆成两句
//声明一个空字符串
let showTime = '';
//把时间格式放进去
showTime = year + '-' + month + '-' + date +'&nbsp' + '星期' + day +'&nbsp' + hour +':' + minute + ':' + second ;
//一样的显示结果 2024-1-8 星期1 17:38:47

显示时间格式的另一种写法：模板文字

let showTime = `${year}年${month}月${date}日 星期${day} ${hour}时${minute}分${second}秒`;
//显示结果 2024年1月8日 星期1 18时6分22秒

let showTime = `${year}-${month}-${date} 星期${day} ${hour}:${minute}:${second}`;
//显示结果 2024-1-8 星期1 18:11:38

星期的显示默认是阿拉伯数字，如果换成大写的一二三四，实现的方法目前知道的有两个，第一个是需要新建一个数组：

let week = ['日','一','二','三','四','五','六'];
let showTime = `${year}-${month}-${date} 星期${week[day]} ${hour}:${minute}:${second}`;
//显示结果 2024-1-8 星期一 18:15:44

let showTime = year + '-' + month + '-' + date +'&nbsp' + '星期' + week[day] +'&nbsp' + hour +':' + minute + ':' + second;
//一样的显示结果
 
//把‘星期’加进数组里，后面的格式里就不需要加‘星期’
let week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
let showTime = `${year}-${month}-${date} ${week[day]} ${hour}:${minute}:${second}`;

//需要注意：数组中，如果“日”不排在第一位，则 week[day] 需要 -1，写成：week[day-1]  ，因为星期是从0开始的，也就是说星期天是显示0，不 减 1 的话，本来应该显示星期一的，就会变成显示星期二
let showTime = `${year}-${month}-${date} 星期${week[day-1]} ${hour}:${minute}:${second}`;
let showTime = year + '年' + month + '月' + date + '日' + '&nbsp' + '星期' + week[day-1] + '&nbsp' + hour +'时' + minute + '分' + second + '秒'

需要注意：数组中，如果“星期日”不排在第一位，则 week[day] 需要 -1，写成：week[day-1] ，因为星期是从0开始的，也就是说星期天是显示0，不减 1 的话，本来应该显示星期一的，就会变成显示星期二

第二个方法，是使用switch case ：

			let week = '';
			switch(day){
				case 0 :
					week = '日';
					break;
				case 1 :
					week = '一';
					break;
				case 2 :
					week = '二';
					break;
				case 3 :
					week = '三';
					break;
				case 4 : 
					week = '四';
					break;
				case 5 : 
					week = '五';
					break;
				case 6 :
					week = '六';
					break;
			}
			let showTime = `${year}-${month}-${date} 星期${week}`;

给日期和时间的显示做进一步的规整：当月、日、时、分、秒显示的数字小于10，在其前面加个0。

代码如下：

setInterval(function(){
    let times = new Date();
    let year = times.getFullYear();
    let month = times.getMonth() + 1;
    let date = times.getDate();
    let day = times.getDay();
    let hour = times.getHours();
    let minute = times.getMinutes();
    let second = times.getSeconds();
    //使用条件运算符 ?:
    //当前数值小于10 ，则在数值前面加 0 
    months = month < 10 ? '0' + month : month; //判断month是否小于10 ，小于10，则显示'0' + month，否则显示month
    date = date < 10 ? '0' + date : date;
    hour = hour < 10 ? '0' + hour : hour;
    minute = minute < 10 ? '0' + minute : minute;
    second = second < 10 ? '0' + second : second;
    
    let week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    let showTime = `${year}-${months}-${date} ${week[day]} ${hour}:${minute}:${second}`;
    document.querySelector('.times').innerHTML = showTime;
},1000);

    // 使用if做判断，最终实现的效果跟条件运算符是一样的
	let	months = checkTime(month);
		date = checkTime(date);
		hour = checkTime(hour);
		minute = checkTime(minute);
		second = checkTime(second);
				
	function checkTime(i){
		if(i < 10){
		    i = '0'+i;
		}
		return i;
	}

*注意：判断语句中的"月份"声明不能再用month,会报错：can't access lexical declaration 'month' before initialization ，应该改成别的，比如：months ，至于为什么不能继续使用month，我也不清楚，如果有大佬知道，在评论中告知，非常感谢！

把 function 的代码块写在 setInterval 外面：

function showTime(){
    let times = new Date();
    let year = times.getFullYear();
    let month = times.getMonth() + 1;
    let date = times.getDate();
    let day = times.getDay();
    let hour = times.getHours();
    let minute = times.getMinutes();
    let second = times.getSeconds();
    
    nowMonth = month < 10 ? '0' + month : month;
    nowDate = date < 10 ? '0' + date : date;
    nowHour = hour < 10 ? '0' + hour : hour; 
    nowMinute = minute < 10 ? '0' + minute : minute;
    nowSecond = second < 10 ? '0' + second : second;
    
    let week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    let showTime = `${year}-${nowMonth}-${nowDate} ${week[day]} ${nowHour}:${nowMinute}:${nowSecond}`;
    document.querySelector('.times').innerHTML = showTime;
};
setInterval(showTime,1000);
//定时器写在function代码块的开头和写在结尾都是一样的正常运行。

将时间代码写成封装函数

function getShowTime(){
    let times = new Date();
        year = times.getFullYear();
        month = times.getMonth()+1;
        date = times.getDate();
        day = timees.getDay();
        hour = times.getHours();
        minute = times.getMinutes();
        second = times.getSeconds();
        
        nowMonth = month < 10 ? '0' + month : month;
        nowDate = date < 10 ? '0' + date : date;
        nowHour = hour < 10 ? '0' + hour : hour;
        nowMinute = minute < 10 ? '0' + minute : minute;
        nowSecond = second < 10 ? '0' + second : second;
    let week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    let showTime = `${year}-${nowMonth}-${nowDate} ${week[day]} ${nowHour}:${nowMinute}:${nowSecond}`;
    return showTime;
};
setInterval(function(){
    document.querySelector('.times').innerHTML = getShowTime();
},1000);

上面的代码，日期、星期、时间都是固定一起显示，不利于样式的设计，如果要将其分开，可以使用的方法有对象封装和数组封装两种：

<div class="hms"></div>
<div class="ymd "></div>
<div class="days"></div>

//对象封装
function getTimeObj(){
    let times = new Date();
        year = times.getFullYear();
        month = times.getMonth()+1;
        date = times.getDate();
        day = times.getDay();
        hour = times.getHours();
        minute = times.getMinutes();
        second = times.getSeconds();
        
        week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        months = month < 10 ? '0'+month:month;
        date = date < 10 ? '0'+date:date;
        hour = hour < 10 ? '0'+hour:hour;
        minute = minute < 10 ? '0'+minute:minute;
        second = second < 10 ? '0'+second:second;
    
        ymd = `${year}年${months}月${date}日`;
        days = `${week[day]}`;
        hms = `${hour}:${minute}:${second}`;
    
    let timeObj = { };
        timeObj.val_0 = ymd;
        timeObj.val_1 = days;
        timeObj.val_2 = hms;
    return timeObj;
}

setInterval(function(){
    let showTime = getTimeObj();
    document.querySelector('.ymd').innerHTML = showTime.val_0;
    document.querySelector('.days').innerHTML = showTime.val_1;
    document.querySelector('.hms').innerHTML = showTime.val_2;
},1000);

let showTime = getTimeObj(); 这个要写在 setInterval 里，否则显示出来的时间是固定的，不会持续更新时间。

如果不写这行代码也是可以的

setInterval(function(){
    document.querySelector('.ymd').innerHTML = getTimeObj().val_0;
    document.querySelector('.days').innerHTML = getTimeObj().val_1;
    document.querySelector('.hms').innerHTML = getTimeObj().val_2;
},1000);
//最终显示效果一致

//使用数组方式封装
function getTimeArr(){
    let times = new Date();
        year = times.getFullYear();
        month = times.getMonth()+1;
        date = tiems.getDate();
        day = times.getDay();
        hour = times.getHours();
        minute = times.getMinutes();
        second = times.getSeconds();
        
        week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        months = month < 10 ? '0'+month:month;
        date = date < 10 ? '0'+date:date;
        hour = hour < 10 ? '0'+hour:hour;
        minute = minute < 10 ? '0'+minute:minute;
        second = second < 10 ? '0'+second:second;
        
        ymd = `${year}年${months}月${date}日`;
        days = `${week[day]}`;
        hms = `${hour}:${minute}:${second}`;
        
    let timeArr = [];
        timeArr[0] = ymd;
        timeArr[1] = days;
        timeArr[2] = hms;
    return timeArr;
}
setInterval(function(){
    let showTime = getTimeArr();
    document.querySelector('.ymd').innerHTML = showTime[0];
    document.querySelector('.days').innerHTML = showTime[1];
    document.querySelector('.hms').innerHTML = showTime[2];
},1000);

数组的使用跟对象不一样，不先获取getTimeArr，日期和时间都无法显示。

//比如写成这个样子，网页直接显示三个 undefined
setInterval(function(){
    document.querySelect1or('.ymd').innerHTML = getTimeArr[0];
    document.querySelector('.days').innerHTML = getTimeArr[1];
    document.querySelector('.hms').innerHTML = getTimeArr[2];
},1000);

//写成这个样子，后台直接报错Uncaught TypeError: can't access property 0, getTimeArr().timeArr is undefined
setInterval(function(){
    document.querySelector('.ymd').innerHTML = getTimeArr().timeArr[0];
    document.querySelector('.days').innerHTML = getTimeArr().timeArr[1];
    document.querySelector('.hms').innerHTML = getTimeArr().timeArr[2];
},1000);

以上便是我的学习到的知识点，如果大家有不一样得代码写法，也可以告诉我，大家一起学习进步。