js实现简单的网页时钟

最新推荐文章于 2025-05-26 11:45:22 发布

原创最新推荐文章于 2025-05-26 11:45:22 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

6 篇文章

订阅专栏

本文将指导你如何利用JavaScript编程实现一个简单的网页时钟，该时钟能够实时显示当前时间，帮助初学者理解DOM操作和时间戳的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title>网页时钟</title>
		<!--
			定时器：有两种定时器
			属于window对象的两个方法：
				window.setInterval("任务"，毫秒值)：每经过多少毫秒执行此任务（重复执行）
				window.setTimeout("任务"，毫秒值)：经过多少毫秒后执行一次
				
			步骤：
			1.创建Date对象拼接时分秒
			2.获取span标签对象
			3.设置span标签对象的innerHTML属性
			4.设置定时器：每经过1000毫秒执行任务（前面的1.2.3）
		-->
	</head>
	
	<body>
		当前系统时间为：<span id = "spanTip"></span>
	</body>
	<script>
		/*function genDate(){
			//如何设置span标签的innerHTML属性
			//1.通过id属性获取span标签
			//注意：span标签对象的获取一定要先加载span标签
			var spanTip = document.getElementById("spanTip");
			//2.设置span标签对象的innerHTML属性
			spanTip.innerHTML = "hello！";
		}*/
		function genDate(){
		//1.创建Date对象拼接时分秒
		var date = new Date();
		//拼接时间
		var dateStr = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日&nbsp;&nbsp"+
		date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";
		
		//2.获取span标签对象
		var spanTip = document.getElementById("spanTip");
		
		//3.设置span标签对象的innerHTML属性
		spanTip.innerHTML = dateStr;
		}
		//4.设置定时器：每经过1000毫秒执行任务（前面的1.2.3）
		window.setInterval("genDate()",1000);
		
	</script>
</html>

效果：
在这里插入图片描述