在页面里动态显示日期与时间

最新推荐文章于 2023-06-03 08:55:26 发布

郭郭郭憨憨

最新推荐文章于 2023-06-03 08:55:26 发布

阅读量825

点赞数 3

本文链接：https://blog.csdn.net/qq_59494319/article/details/125286768

版权

关键词由CSDN通过智能技术生成

在页面里动态显示日期与时间

1.小时按12小时制，不足两位的前面补0
2.根据获取的时间，判断上下午，用am，pm表示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 500px;
				margin: 100px auto;
				font-size: 20px;
				font-weight: 800;
			}
		</style>
	</head>
	<body>
		<div id="wrapper"></div>
		<script>
			let b=document.getElementById("wrapper");
			id=setInterval(function action(){
				let date=new Date();//当前时间
				let years=date.getFullYear();//得到年份
				let months=date.getMonth()+1;//得到月份
				let day=date.getDate();//得到几日
				let date1=new Date(`${years}-${months}-${day}`);//当天开始的时间
				let week=date.getDay();//得到星期几
				let times=date-date1;//时间差ms
				let hours=parseInt(times/1000/60/60);//小时
				let minutes=parseInt(times/1000/60%60);//分钟
				let seconds=parseInt(times/1000%60);//秒
				let a="pm";
				//将星期几的数字转换为中文
				switch (week){
					case 0:
					week="日"
						break;
					case 1:
					week="一"
						break;
					case 2:
					week="二"
						break;
					case 3:
					week="三"
						break;
					case 4:
					week="四"
						break;
					case 5:
					week="五"
						break;
					default:
					week="六"
						break;
				}
				if(hours<12){
					a="am"//当hours小于12时显示am，大于12时显示pm
					if(hours<10){
						hours="0"+hours;//当是个位数时，给前面补0
					}
				}
				if(minutes<10){
					minutes="0"+minutes;//当是个位数时，给前面补0
				}
				if(seconds<10){
					seconds="0"+seconds;//当是个位数时，给前面补0
				}
				b.innerHTML=`今天是${years}年${months}月${day}日 星期${week} ${hours}:${minutes}:${seconds} ${a}`;
			},1000)
		</script>
	</body>
</html>