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

本文介绍了一种使用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值