js实现12小时制时间

spy过家家

已于 2022-06-15 09:47:08 修改

阅读量786

点赞数 3

文章标签： javascript elementui webview

于 2022-06-14 19:49:35 首次发布

本文链接：https://blog.youkuaiyun.com/zm8454/article/details/125284948

版权

条件：

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

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

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#wrapper {
				width: 600px;
				height: 100px;
				border: 3px solid red;
				margin: 0 auto;
				text-align: center;
				line-height: 100px;
				font-size: 20px;
				font-weight: 500;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">

		</div>
		<script>
			var _wrapper = document.getElementById("wrapper");
			var id = setInterval(function() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var xingqi = date.getDay();
				var hours = date.getHours();
				var minutes = date.getMinutes();
				var seconds = date.getSeconds();
				var swxw = date.getHours();
				if (swxw > 12) {
					swxw = `PM`
				} else {
					swxw = `AM`
				}
				if (hours > 12) {
					hours = hours - 12;
				} else {
					hours = hours;
				}
				if (hours < 10) {
					hours = `0${hours}`;
				}
				if (xingqi == 0) {
					xingqi = `日`;
				}
				if (xingqi == 1) {
					xingqi = `一`;
				}
				if (xingqi == 2) {
					xingqi = `二`;
				}
				if (xingqi == 3) {
					xingqi = `三`;
				}
				if (xingqi == 4) {
					xingqi = `四`;
				}
				if (xingqi == 5) {
					xingqi = `五`;
				}
				if (xingqi == 6) {
					xingqi = `六`;
				}
				_wrapper.innerHTML = `今天是${year}年${month}月${day}日&emsp;星期${xingqi}&emsp;${hours}时${minutes}分${seconds}秒&emsp;${swxw}`;
			}, 1000)
		</script>
	</body>
</html>

页面效果：