前端页面动态显示时间（年月日星期时分秒）

一只笨菜鸟

已于 2023-04-06 12:51:06 修改

阅读量6.2k

点赞数 2

分类专栏：有趣的前端文章标签： javascript css html

于 2021-11-11 17:35:06 首次发布

本文链接：https://blog.csdn.net/m0_48660016/article/details/121272510

版权

有趣的前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.box {
				width: 100%;
				height: 50px;
				background-color: cadetblue;
				border-bottom: solid 1px black;
			}
			#showTime {
				width: 300px;
				height: 25px;
				background-color: azure;
				padding-top: 25px;
				text-align: center;
				float: right;
			}
		</style>

	</head>
	<body>
		<div class="box">
			<div id="showTime"></div>
		</div>

		<script type="text/javascript">
			let myClock = setInterval(function() {
				var date = new Date();
				//date.getDay()拿到的值是阿拉伯数字，将他换成汉字
				var week = date.getDay()
				switch (week) {
					case 1:
						week = "星期一"
						break;
					case 2:
						week = "星期二"
						break;
					case 3:
						week = "星期三"
						break;
					case 4:
						week = "星期四"
						break;
					case 5:
						week = "星期五"
						break;
					case 6:
						week = "星期六"
						break;
					case 0:
						week = "星期日"
						break;
				}
				// 时间没有在此处一次性组合完毕是为了方便在 输出时美化
				// 组合年月日
				let ymd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
				// 组合时分秒
				let hms = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

				document.getElementById("showTime").innerHTML = ymd + "&nbsp;&nbsp;" + week + "&nbsp;&nbsp; " + hms;
			}, 1000)

		</script>
	</body>
</html>

一只笨菜鸟

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
前端页面动态显示时间（年月日星期时分秒）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } .box { width: 100%; height: 50px; background-color: cad.
复制链接

扫一扫