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

意中人Crush

已于 2022-06-14 20:31:46 修改

阅读量556

点赞数 8

分类专栏： js基础以及经典题文章标签： JavaScript DOM操作日期处理 12小时制 am/pm

于 2022-06-14 19:41:50 首次发布

本文链接：https://blog.csdn.net/qq_69555866/article/details/125284816

版权

js基础以及经典题专栏收录该内容

8 篇文章 0 订阅

订阅专栏

要求：

1.小时按12小时制，不足两位的前面补0

2.根据获取的时间，判断上下午，用am，pm表示

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#first{
				width:400px;
				margin:0 auto;
				height:50px;
				border:2px solid red;
				line-height:50px;
				text-align:center;
			}
		</style>
	</head>
	<body>
		<div id="first"></div>
		<script>
			var id=setInterval(function(){
				var _first=document.getElementById("first")
				var date=new Date();
				var a=date.getFullYear();
				var b=date.getMonth();
				var c=date.getDate();
				var d=date.getDay();
				var e=date.getHours();
				var f=date.getMinutes();
				var g=date.getSeconds();
				var h;
				if(d==0){
					d=`星期日`
				}else if(d==1){
					d=`星期一`
				}else if(d==2){
					d=`星期二`
				}else if(d==3){
					d=`星期三`
				}else if(d==4){
					d=`星期四`
				}else if(d==5){
					d=`星期五`
				}else{
					d=`星期六`
				}
				if(f<10){
					f=`0${f}`
				}
				if(g<10){
					g=`0${g}`
				}
				if(e<12){
					if (e<10) {
						h=`0${e}:${f}:${g}am`
					} else{
						h=`${e}:${f}:${g}am`
					}
				}else{
					e=e-12;
					if(e<10){
						h=`0${e}:${f}:${g}pm`
					}else{
						h=`${e}:${f}:${g}pm`
					}
				}
				_first.innerHTML=`今天是${a}年${b+1}月${c}日&emsp;${d}&emsp;${h}`;
			},1000)
			
		</script>
	</body>
</html>

效果展示：