下班倒计时（如果当天的下班时间已经过了，需要将第99行代码的时间修改才能实现，不然会没法倒计时）

最新推荐文章于 2024-11-12 20:30:00 发布

是星星就该闪烁

最新推荐文章于 2024-11-12 20:30:00 发布

阅读量299

点赞数

文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/FGHJRT/article/details/129189995

版权

此博客涉及HTML和CSS相关内容，CSS包含CSS3。HTML和CSS是前端开发的重要技术，HTML用于构建网页结构，CSS负责网页样式设计，CSS3则带来更多新特性。

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

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.countdown {
				width: 240px;
				height: 305px;
				text-align: center;
				line-height: 1;
				color: #fff;
				background-color: brown;
				/* background-size: 240px; */
				/* float: left; */
				overflow: hidden;
			}
			
			.countdown .next {
				font-size: 16px;
				margin: 25px 0 14px;
			}
			
			.countdown .title {
				font-size: 33px;
			}
			
			.countdown .tips {
				margin-top: 80px;
				font-size: 23px;
			}
			
			.countdown small {
				font-size: 17px;
			}
			
			.countdown .clock {
				width: 142px;
				margin: 18px auto 0;
				overflow: hidden;
			}
			
			.countdown .clock span,
			.countdown .clock i {
				display: block;
				text-align: center;
				line-height: 34px;
				font-size: 23px;
				float: left;
			}
			
			.countdown .clock span {
				width: 34px;
				height: 34px;
				border-radius: 2px;
				background-color: #303430;
			}
			
			.countdown .clock i {
				width: 20px;
				font-style: normal;
			}
		</style>
	</head>

	<body>
		<div class="countdown">
			<p class="next">今天是2023年2月23日</p>
			<p class="title">下班倒计时</p>
			<p class="clock">
				<span id="hour">00</span>
				<i>:</i>
				<span id="minutes">25</span>
				<i>:</i>
				<span id="scond">20</span>
			</p>
			<p class="tips">
				下班时间: 18:30:00
			</p>
		</div>
		<script>
			//同步当前年月日
			let next = document.querySelector('.next');
			let now = new Date();
			let year = now.getFullYear();
			let mounth = now.getMonth() + 1;
			let dates = now.getDate();
			next.innerHTML = `今天是${year}年${mounth}月${dates}日`;
			//控制倒计时时间
			let hour = document.querySelector('#hour');
			let minutes = document.querySelector('#minutes');
			let scond = document.querySelector('#scond');

			setInterval(function() { //2023-02-23 18:30:00
				//指定时间戳
				let last = +new Date(`${year}-${mounth}-${dates} 21:30:00`);//如果时间段过了将变错
				//当前时间戳
				let num = +new Date();
				//当前时间到指定时间的秒数
				let count = (last - num) / 1000;
				//计算时分秒
				// h = parseInt(总秒数 / 60 / 60 % 24)   //   计算小时
				let h = parseInt(count / 60 / 60 % 24)
				h = h < 10 ? '0' + h : h
				// m = parseInt(总秒数 / 60 % 60);     //   计算分数
				let m = parseInt(count / 60 % 60)
				m = m < 10 ? '0' + m : m
				// s = parseInt(总秒数 % 60); //   计算当前秒数
				let s = parseInt(count % 60);
				s = s < 10 ? '0' + s : s
				
				hour.innerHTML=h;
				minutes.innerHTML=m;
				scond.innerHTML=s;
			}, 1000)
		</script>
	</body>

</html>