网站上线倒计时 HTML5 模板
这个模板具有以下特点：
（图片来源网络，侵删）
- 纯前端实现：无需后端服务器,直接在浏览器中运行。
- 响应式设计：在桌面、平板和手机上都能完美显示。
- 视觉效果：包含动态粒子背景和渐变文字效果。
- 功能完整：倒计时、订阅通知、社交媒体链接一应俱全。
- 易于定制：代码结构清晰，方便修改颜色、日期、链接等信息。
最终预览效果
完整代码 (HTML, CSS, JavaScript)
您可以将以下所有代码复制到一个名为 index.html 的文件中,然后用浏览器打开即可看到效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">即将上线 - 网站倒计时</title>
<!-- 引入字体图标库 (Font Awesome) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* --- 全局样式 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #0a0a0a;
color: #ffffff;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* --- 背景画布 --- */
#particles-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/* --- 主容器 --- */
.countdown-container {
text-align: center;
padding: 40px 20px;
max-width: 900px;
width: 100%;
z-index: 1;
}
/* --- 标题和副标题 --- */
.main-title {
font-size: clamp(2.5rem, 5vw, 4rem); /* 使用 clamp 实现响应式字体大小 */
font-weight: 800;
margin-bottom: 10px;
background: linear-gradient(45deg, #ff6a00, #ee0979);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 30px rgba(255, 106, 0, 0.5);
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from { filter: brightness(1); }
to { filter: brightness(1.2); }
}
.subtitle {
font-size: clamp(1rem, 2vw, 1.2rem);
color: #cccccc;
margin-bottom: 50px;
}
/* --- 倒计时器 --- */
.countdown {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 50px;
flex-wrap: wrap; /* 在小屏幕上换行 */
}
.countdown-box {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 25px 20px;
backdrop-filter: blur(10px);
min-width: 120px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.countdown-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(255, 106, 0, 0.2);
}
.countdown-number {
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 700;
color: #ffffff;
display: block;
line-height: 1;
}
.countdown-label {
font-size: 0.9rem;
color: #aaaaaa;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 5px;
}
/* --- 订阅表单 --- */
.subscribe-form {
margin-top: 50px;
}
.subscribe-form h3 {
font-size: 1.5rem;
margin-bottom: 20px;
color: #ffffff;
}
.form-group {
display: flex;
justify-content: center;
gap: 10px;
max-width: 500px;
margin: 0 auto;
}
.form-input {
flex: 1;
padding: 15px 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.05);
color: #ffffff;
border-radius: 50px;
font-size: 1rem;
outline: none;
transition: border-color 0.3s ease, background-color 0.3s ease;
}
.form-input::placeholder {
color: #888888;
}
.form-input:focus {
border-color: #ff6a00;
background: rgba(255, 255, 255, 0.1);
}
.submit-btn {
padding: 15px 30px;
border: none;
background: linear-gradient(45deg, #ff6a00, #ee0979);
color: #ffffff;
font-size: 1rem;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.submit-btn:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(238, 9, 121, 0.4);
}
/* --- 社交链接 --- */
.social-links {
margin-top: 40px;
}
.social-links a {
color: #cccccc;
font-size: 1.5rem;
margin: 0 15px;
transition: color 0.3s ease, transform 0.3s ease;
}
.social-links a:hover {
color: #ff6a00;
transform: translateY(-3px);
}
/* --- 成功提示信息 --- */
#success-message {
margin-top: 20px;
padding: 15px;
background-color: rgba(76, 175, 80, 0.2);
border: 1px solid rgba(76, 175, 80, 0.5);
border-radius: 10px;
color: #4caf50;
display: none; /* 默认隐藏 */
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
.countdown {
gap: 15px;
}
.countdown-box {
padding: 20px 15px;
min-width: 100px;
}
.form-group {
flex-direction: column;
}
.submit-btn {
width: 100%;
}
}
</style>
</head>
<body>
<!-- 粒子背景画布 -->
<canvas id="particles-canvas"></canvas>
<div class="countdown-container">
<h1 class="main-title">我们即将上线</h1>
<p class="subtitle">新世界的大门即将开启，敬请期待！</p>
<!-- 倒计时显示区域 -->
<div class="countdown" id="countdown">
<div class="countdown-box">
<span class="countdown-number" id="days">00</span>
<span class="countdown-label">天</span>
</div>
<div class="countdown-box">
<span class="countdown-number" id="hours">00</span>
<span class="countdown-label">时</span>
</div>
<div class="countdown-box">
<span class="countdown-number" id="minutes">00</span>
<span class="countdown-label">分</span>
</div>
<div class="countdown-box">
<span class="countdown-number" id="seconds">00</span>
<span class="countdown-label">秒</span>
</div>
</div>
<!-- 订阅表单 -->
<div class="subscribe-form">
<h3>第一时间获取通知</h3>
<form id="notify-form">
<div class="form-group">
<input type="email" class="form-input" id="email-input" placeholder="请输入您的邮箱" required>
<button type="submit" class="submit-btn">立即订阅</button>
</div>
</form>
<div id="success-message">
<i class="fas fa-check-circle"></i> 感谢您的订阅！上线通知将发送至您的邮箱。
</div>
</div>
<!-- 社交媒体链接 -->
<div class="social-links">
<a href="#" title="微博"><i class="fab fa-weibo"></i></a>
<a href="#" title="微信"><i class="fab fa-weixin"></i></a>
<a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" title="GitHub"><i class="fab fa-github"></i></a>
</div>
</div>
<script>
// --- 1. 倒计时逻辑 ---
// 1.1 设置目标日期 (请修改为您希望的上线日期)
// 格式: YYYY-MM-DDTHH:mm:ss
const launchDate = new Date("2025-12-31T23:59:59").getTime();
// 1.2 获取倒计时显示的DOM元素
const daysElement = document.getElementById('days');
const hoursElement = document.getElementById('hours');
const minutesElement = document.getElementById('minutes');
const secondsElement = document.getElementById('seconds');
// 1.3 更新倒计时函数
function updateCountdown() {
const now = new Date().getTime();
const distance = launchDate - now;
if (distance < 0) {
// 如果倒计时结束
document.getElementById('countdown').innerHTML = "<h2>我们已正式上线！</h2>";
clearInterval(countdownInterval);
return;
}
// 计算天、时、分、秒
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 更新DOM元素内容，确保始终为两位数
daysElement.textContent = String(days).padStart(2, '0');
hoursElement.textContent = String(hours).padStart(2, '0');
minutesElement.textContent = String(minutes).padStart(2, '0');
secondsElement.textContent = String(seconds).padStart(2, '0');
}
// 1.4 每秒调用一次更新函数
const countdownInterval = setInterval(updateCountdown, 1000);
// 立即执行一次，避免等待1秒
updateCountdown();
// --- 2. 订阅表单逻辑 ---
const notifyForm = document.getElementById('notify-form');
const successMessage = document.getElementById('success-message');
notifyForm.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
const emailInput = document.getElementById('email-input');
const email = emailInput.value;
if (email) {
// 这里是模拟提交成功
// 在实际项目中，您需要使用 AJAX 或 Fetch API 将数据发送到后端服务器
console.log('订阅邮箱:', email);
// 显示成功消息
successMessage.style.display = 'block';
// 清空输入框
emailInput.value = '';
// 5秒后隐藏成功消息
setTimeout(() => {
successMessage.style.display = 'none';
}, 5000);
}
});
// --- 3. 粒子背景动画 ---
const canvas = document.getElementById('particles-canvas');
const ctx = canvas.getContext('2d');
// 设置画布大小
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// 粒子类
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 2 + 1;
this.speedX = Math.random() * 1 - 0.5;
this.speedY = Math.random() * 1 - 0.5;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
// 如果粒子移出画布，重新放置到另一侧
if (this.x > canvas.width) this.x = 0;
else if (this.x < 0) this.x = canvas.width;
if (this.y > canvas.height) this.y = 0;
else if (this.y < 0) this.y = canvas.height;
}
draw() {
ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
// 创建粒子数组
const particlesArray = [];
const numberOfParticles = 100;
for (let i = 0; i < numberOfParticles; i++) {
particlesArray.push(new Particle());
}
// 连接临近的粒子
function connectParticles() {
for (let a = 0; a < particlesArray.length; a++) {
for (let b = a; b < particlesArray.length; b++) {
const distance = Math.sqrt(
Math.pow(particlesArray[a].x - particlesArray[b].x, 2) +
Math.pow(particlesArray[a].y - particlesArray[b].y, 2)
);
if (distance < 100) {
ctx.strokeStyle = `rgba(255, 255, 255, ${0.1 * (1 - distance / 100)})`;
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(particlesArray[a].x, particlesArray[a].y);
ctx.lineTo(particlesArray[b].x, particlesArray[b].y);
ctx.stroke();
}
}
}
}
// 动画循环
function animateParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particlesArray.length; i++) {
particlesArray[i].update();
particlesArray[i].draw();
}
connectParticles();
requestAnimationFrame(animateParticles);
}
animateParticles();
</script>
</body>
</html>
如何使用和自定义
1 修改上线日期
找到 JavaScript 代码中的这一行：
const launchDate = new Date("2025-12-31T23:59:59").getTime();
将 "2025-12-31T23:59:59" 修改为您希望的上线日期和时间，格式为 YYYY-MM-DDTHH:mm:ss。
2 修改网站标题和副标题
在 HTML 的 <h1> 和 <p> 标签中修改文字内容：
（图片来源网络，侵删）
<h1 class="main-title">我们即将上线</h1> <p class="subtitle">新世界的大门即将开启，敬请期待！</p>
3 修改订阅表单（后端集成）
当前的订阅功能是前端模拟，要使其真正工作,您需要将表单数据发送到后端服务器。
- 修改
<form>标签，添加action和method属性：<form id="notify-form" action="your-server-endpoint" method="POST">
- 在 JavaScript 中，使用
fetchAPI 来处理提交，而不是仅仅显示一个提示信息，这里需要您根据自己后端 API 的要求来编写代码。
4 修改社交媒体链接
找到 <div class="social-links"> 部分，将 href="#" 修改为您实际的社交媒体链接地址。
<a href="https://weibo.com/yourusername" title="微博"><i class="fab fa-weibo"></i></a>
5 修改颜色主题
您可以通过修改 CSS 中的颜色值来改变主题风格,主要颜色集中在渐变和文字效果上：
background: linear-gradient(45deg, #ff6a00, #ee0979);
/* 按钮渐变 */
background: linear-gradient(45deg, #ff6a00, #ee0979);
/* 悬停效果颜色 */
color: #ff6a00;
box-shadow: 0 5px 15px rgba(238, 9, 121, 0.4);将 #ff6a00 和 #ee0979 替换为您喜欢的任何 HEX 颜色代码。
（图片来源网络，侵删）
技术要点解析
- HTML5 语义化标签：使用了
<header>,<main>,<section>等标签,使页面结构更清晰。 - CSS3 高级特性：
backdrop-filter: blur(10px)：实现了毛玻璃效果。linear-gradient和-webkit-background-clip: text：创建了渐变文字效果。clamp()函数：实现了响应式的字体大小,确保在不同屏幕上都有良好的阅读体验。transition和hover：添加了平滑的交互动画。
- JavaScript (ES6+)：
setInterval：用于驱动倒计时每秒更新。Date对象：用于计算时间差。padStart()：确保数字始终显示两位数（如01而不是1）。Canvas API：用于绘制动态粒子背景,增加了视觉吸引力。addEventListener：用于处理用户交互（如表单提交）。
- 响应式设计：通过媒体查询 (
@media) 和相对单位 (vw,vh, ),确保了在移动设备上的良好显示效果。
这个模板为您提供了一个功能强大且美观的起点,您可以根据自己的品牌和需求进行深度定制。
