JavaScript-练习在页面上动态显示当前时间

最新推荐文章于 2024-08-06 11:16:40 发布

paku-san

最新推荐文章于 2024-08-06 11:16:40 发布

阅读量3.4k

点赞数 6

分类专栏：练习文章标签： js JavaScript 练习前端

本文链接：https://blog.csdn.net/qq_35302939/article/details/90407977

版权

练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需求：把当前的时间在页面上动态的显示出来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span id="time"></span>
		<script>
			function show() {
				//创建内置Date对象
				var date = new Date();
				//获取当前年份
				var year = date.getFullYear();
				//获取当前的月份,范围是0-11
				var month = date.getMonth() + 1;
				//获取该月的第几天
				var day = date.getDate();
				//getDay方法获取当前是这个星期的第几天范围是0-6
				//周日对应0，123456分别是对应的星期几
				var week = "日一二三四五六".charAt(date.getDay());
				//获取当前小时分钟和秒
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				//选择id为time的标签
				var element = document.getElementById("time");
				element.innerHTML = year+"年"+month+"月"+day+"日"+"星期"+week+"	"+hour+"时"+minute+"分"+second+"秒";
			}
			show();
			//每间隔1000毫秒执行一次程序，保证时间动态显示
			setInterval("show()",1000);
		</script>
	</body>
</html>

当然有多个标签的时候

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span class="time"></span>
		<p class="time"></p>
		<label class="time"></label>
		<b class="time"></b>
		<i class="time"></i>
		<script>
			function show() {
				//创建内置Date对象
				var date = new Date();
				//获取当前年份
				var year = date.getFullYear();
				//获取当前的月份,范围是0-11
				var month = date.getMonth() + 1;
				//获取该月的第几天
				var day = date.getDate();
				//getDay方法获取当前是这个星期的第几天范围是0-6
				//周日对应0，123456分别是对应的星期几
				var week = "日一二三四五六".charAt(date.getDay());
				//获取当前小时分钟和秒
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				//把当前的时间动态的表现到页面上面
				var elements = document.getElementsByClassName("time");
				for(var i = 0; i < elements.length; i++){
					elements[i].innerHTML = year+"年"+month+"月"+day+"日"+"星期"+week+"	"+hour+"时"+minute+"分"+second+"秒";
				}
			}
			show();
			//每间隔1000毫秒执行一次程序，保证时间动态显示
			setInterval("show()",1000);
		</script>
	</body>
</html>