简单用js实现12小时制时间

最新推荐文章于 2024-05-21 14:15:14 发布

大头酥

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量1.1k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_72058032/article/details/126183920

版权

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box {
				width: 400px;
				height: 52px;
				text-align: center;
				line-height: 52px;
				border: 3px solid red;
			}
		</style>

	</head>
	<body>
		<div id="box"></div>
		
	</body>
</html>

JavaScript代码

<script>
			setInterval(function() {
				var _box = document.querySelector("#box");
				var mydate = new Date();
				var year = mydate.getFullYear();  //年
				var month = mydate.getMonth() + 1;  //月
				var date = mydate.getDate();   //日
				var day = mydate.getDay();//星期
				var hours = mydate.getHours();//时
				var minutes = mydate.getMinutes();//分
				var seconds = mydate.getSeconds();//秒
				var miao;
				if (hours > 12) {
					hours -= 12;
					var suffix = "pm";
				} else {
					var suffix = "am";
				}
				if (hours < 10) {
					hours = `0${hours}`;
				}
				if (minutes < 10) {
					minutes = `0${minutes}`;
				}
				if (seconds < 10) {
					seconds = `0${seconds}`;
				}
				if (day == 0) {
					day = '日';
				}
				if (day == 1) {
					day = '一';
				}
				if (day == 2) {
					day = '二';
				}
				if (day == 3) {
					day = '三';
				}
				if (day == 4) {
					day = '四';
				}
				if (day == 5) {
					day = '五';
				}
				if (day == 6) {
					day = '六';
				}
				_box.innerText = `今天是${year}年${month}月${date}日 星期${day} ${hours}:${minutes}:${seconds} ${suffix}`
			}, 1000)
		</script>