静态界面——倒计时

发布时间：2024年01月10日

静态界面——倒计时

功能代码

<!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-03-16 09:00:00";
			// 获取当前时间
			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>

界面展示

在这里插入图片描述

文章来源:https://blog.csdn.net/qq_39877681/article/details/135502314
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章