要求

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

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

效果图

html代码

<div id="box">
			
		</div>

js代码

<script type="text/javascript">
		var _box=document.getElementById("box");
			var id=setInterval(function function_name () {
				var date=new Date();
				var years=date.getFullYear();
				var months=date.getMonth();
				var days=date.getDate();
				var weeks=date.getDay();
				var date1=new Date(`${years}-${months+1}-${days}`);
				var times=date-date1;
				var hours=parseInt(times/1000/60/60);
				var minutes=parseInt(times/1000/60%60);
				var seconds=parseInt(times/1000%60);
				var zhou;
				switch(weeks){
					case 0:
						zhou="星期日";
						break;
					case 1:
						zhou="星期一";
						break;
					case 2:
						zhou="星期二";
						break;
					case 3:
						zhou="星期三";
						break;
					case 4:
						zhou="星期四";
						break;
					case 5:
						zhou="星期五";
						break;
					default:
						zhou="星期六";
						break;
				}
				if(seconds==1||seconds==2||seconds==3||seconds==4||seconds==5||seconds==6||seconds==7||seconds==8||seconds==9||seconds==0){
					seconds="0"+seconds;
				}
				if(minutes==1||minutes==2||minutes==3||minutes==4||minutes==5||minutes==6||minutes==7||minutes==8||minutes==9||minutes==0){
					minutes="0"+minutes;
				}
				if(Number(hours)>12){
					var a="PM"
					hours=hours-12;
				}else{
					var a="AM"
				}
				if(hours==1||hours==2||hours==3||hours==4||hours==5||hours==6||hours==7||hours==8||hours==9){
					hours="0"+hours;
				}
				_box.innerHTML="今天是"+years+"年"+months+"月"+days+"日"+"&ensp;"+zhou+"&ensp;"+hours+":"+minutes+":"+seconds+"&ensp;"+a;
			},1000);
		</script>

觉得有用的话就点个赞吧