JavaScript日期对象——【小案例】钟表案例

最新推荐文章于 2022-09-29 20:38:13 发布

喋喋小菜鸡

最新推荐文章于 2022-09-29 20:38:13 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/DebbyOctober/article/details/108210706

本文介绍了一种使用HTML和JavaScript实现的实时动态时钟，能够自动更新显示当前的日期和时间，包括年、月、日、星期以及小时、分钟和秒。通过定时器和JavaScript的Date对象，实现了页面加载后即时显示正确的时间，并每秒更新。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
<body style="background: black;color: white;font-size: 30px;">
		<span id="year">00</span>
		年
		<span id="month">00</span>
		月
		<span id="date">00</span>
		日
		星期
		<span id="day">0</span>
		<span id="hours">00</span>
		:
		<span id="minutes" >00</span>
		:
		<span id="seconds" >00</span>
	<script>
		//1)获取到盒子的id
		var year = document.getElementById("year");
			month = document.getElementById("month");
			date = document.getElementById("date");
			day = document.getElementById("day");
			hours = document.getElementById("hours");
			minutes = document.getElementById("minutes");
			seconds = document.getElementById("seconds");
		//2)改变盒子内的文本
			function fn(){
			var date=new Date();
				year.innerHTML = time(date.getFullYear());
				month.innerHTML = time(date.getMonth()+1);
				date.innerHTML = time(date.getDate());
				day.innerHTML = time(date.getDay());
				hours.innerHTML = time(date.getHours());
				minutes.innerHTML = time(date.getMinutes());
				seconds.innerHTML = time(date.getSeconds());
			}
		//3)因为有动的效果,所以写入定时器操作(改变)
			setInterval(function() {
				fn();
			}, 1000)
		//4)>如果时间是1,2,3....应该变为01,02,03
			function time(str){
				if(str<10) {
				return "0" +str;
				}else{
					return str;
				}
			}
			 
		//5)刷新页面,出现00:00:00是定时器的原因,因为定时器是1000毫秒
		//才会改变文本内容,所以在一刷新页面时就要调用fn函数来解决此问题
			fn();
	</script>
	</body>
</html>