静态界面——倒计时

小tenten

已于 2024-02-08 09:22:20 修改

阅读量913

点赞数 24

文章标签： javascript

于 2024-01-10 14:20:59 首次发布

本文链接：https://blog.csdn.net/qq_39877681/article/details/135502314

版权

静态界面——倒计时

功能代码
界面展示

功能代码

<!DOCTYPE html>
<html>
	<head>
		<title>倒计时</title>
		<style>
			body {
				font-family: Arial, sans-serif;
				text-align: center;
			}

			h1 {
				font-size: 80px;
				color: #ff0000;
				line-height: 40vh;
			}

			.topStyle {
				color: #fff;
				font-size: 60px;
				line-height: 20vh;
				background-color: #42958b;
			}

			.bottomStyle {
				font-size: 60px;
				line-height: 20vh;
				font-style: italic
			}
		</style>
	</head>
	<body style="text-align: center;">
		<div class="topStyle">标题</div>
		<h1 id="countdown">剩余时间</h1>
		<script>
			// 定义截至时间点
			var examDate = "2024-12-30 23:59:59";
			// 获取当前时间
			var now = new Date().getTime();
			// 获取所剩时间
			var countdownDate = new Date(examDate).getTime() - now;
			function updateCountdown() {
				var days = Math.floor(countdownDate / (1000 * 60 * 60 * 24));
				var hours = Math.floor((countdownDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				var minutes = Math.floor((countdownDate % (1000 * 60 * 60)) / (1000 * 60));
				var seconds = Math.floor((countdownDate % (1000 * 60)) / 1000);
				document.getElementById("countdown").textContent = days + "天 " + hours + "小时" + minutes + "分钟 " + seconds + "秒";
				// 获取当前时间
				now = new Date().getTime();
				countdownDate = new Date(examDate).getTime() - now;
			}
			setInterval(updateCountdown, 1000);
		</script>
		<div class="bottomStyle">XXXXXXXXXXXXX</div>
	</body>
</html>