分享一个在线时钟的静态页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线时钟</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'ZCOOL KuaiLe', cursive;
transition: background 0.5s ease, color 0.5s ease;
padding: 2rem;
}
/* 主题配置 */
.theme-green { background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%); color: #2E7D32; }
.theme-blue { background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); color: #1565C0; }
.theme-purple { background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%); color: #7B1FA2; }
.theme-orange { background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%); color: #E65100; }
.theme-pink { background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD9 100%); color: #C2185B; }
.theme-dark { background: linear-gradient(135deg, #263238 0%, #37474F 100%); color: #ECEFF1; }
/* 主题选择器 */
.theme-switcher {
position: fixed;
top: 1.5rem;
right: 1.5rem;
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
max-width: 200px;
justify-content: center;
}
.theme-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 3px solid rgba(0,0,0,0.1);
cursor: pointer;
transition: all 0.2s;
font-size: 1.2rem;
}
.theme-btn:hover {
transform: scale(1.15);
border-color: rgba(0,0,0,0.3);
}
.theme-btn.active {
border-color: rgba(0,0,0,0.5);
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.btn-green { background: #4CAF50; }
.btn-blue { background: #2196F3; }
.btn-purple { background: #9C27B0; }
.btn-orange { background: #FF9800; }
.btn-pink { background: #E91E63; }
.btn-dark { background: #455A64; }
/* 时间显示 */
.clock-container {
text-align: center;
}
.date-row {
font-size: 2.8rem;
margin-bottom: 1.5rem;
opacity: 0.85;
letter-spacing: 0.1em;
}
.time-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
}
.time-unit {
display: flex;
flex-direction: column;
align-items: center;
}
.time-value {
font-family: 'Orbitron', monospace;
font-size: 9.5rem;
font-weight: 900;
line-height: 1;
letter-spacing: 0.05em;
text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}
.time-label {
font-size: 2rem;
margin-top: 0.8rem;
opacity: 0.7;
}
.time-separator {
font-family: 'Orbitron', monospace;
font-size: 7rem;
font-weight: 700;
animation: blink 1s infinite;
line-height: 1;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.weekday-row {
font-size: 2.5rem;
margin-top: 2rem;
opacity: 0.8;
letter-spacing: 0.15em;
}
/* 装饰 */
.decoration {
position: fixed;
font-size: 3rem;
opacity: 0.3;
animation: float 3s ease-in-out infinite;
}
.dec-left { left: 2rem; top: 30%; animation-delay: 0s; }
.dec-right { right: 2rem; top: 40%; animation-delay: 1s; }
.dec-bottom { left: 50%; bottom: 2rem; transform: translateX(-50%); animation-delay: 2s; }
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-15px) rotate(5deg); }
}
/* 响应式 */
@media (max-width: 768px) {
.time-value {
font-size: 5rem;
}
.time-separator {
font-size: 4rem;
}
.date-row {
font-size: 1.8rem;
}
.weekday-row {
font-size: 1.5rem;
}
.time-label {
font-size: 1.4rem;
}
.theme-switcher {
top: 1rem;
right: 1rem;
max-width: 150px;
}
.theme-btn {
width: 30px;
height: 30px;
font-size: 1rem;
}
.decoration {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.time-value {
font-size: 4rem;
}
.time-separator {
font-size: 3rem;
}
.date-row {
font-size: 1.5rem;
}
.weekday-row {
font-size: 1.2rem;
}
.time-label {
font-size: 1.2rem;
}
.time-row {
gap: 0.15rem;
}
}
</style>
</head>
<body class="theme-green">
<!-- 主题切换器 -->
<div class="theme-switcher">
<button class="theme-btn btn-green active" data-theme="green" title="绿色">🟢</button>
<button class="theme-btn btn-blue" data-theme="blue" title="蓝色">🔵</button>
<button class="theme-btn btn-purple" data-theme="purple" title="紫色">🟣</button>
<button class="theme-btn btn-orange" data-theme="orange" title="橙色">🟠</button>
<button class="theme-btn btn-pink" data-theme="pink" title="粉色">🔴</button>
<button class="theme-btn btn-dark" data-theme="dark" title="深色">⚫</button>
</div>
<!-- 装饰 -->
<div class="decoration dec-left">☀️</div>
<div class="decoration dec-right">🌙</div>
<div class="decoration dec-bottom">⭐</div>
<!-- 时钟 -->
<div class="clock-container">
<div class="date-row">
<span id="year"></span>年<span id="month"></span>月<span id="date"></span>日
</div>
<div class="time-row">
<span class="time-value" id="hours">00</span>
<span class="time-separator">:</span>
<span class="time-value" id="minutes">00</span>
<span class="time-separator">:</span>
<span class="time-value" id="seconds">00</span>
</div>
<div class="weekday-row" id="weekday"></div>
</div>
<script>
// 时钟更新
function updateClock() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const date = String(now.getDate()).padStart(2, '0');
let hours = String(now.getHours()).padStart(2, '0');
let minutes = String(now.getMinutes()).padStart(2, '0');
let seconds = String(now.getSeconds()).padStart(2, '0');
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const weekday = weekdays[now.getDay()];
document.getElementById('year').textContent = year;
document.getElementById('month').textContent = month;
document.getElementById('date').textContent = date;
document.getElementById('hours').textContent = hours;
document.getElementById('minutes').textContent = minutes;
document.getElementById('seconds').textContent = seconds;
document.getElementById('weekday').textContent = weekday;
}
updateClock();
setInterval(updateClock, 1000);
// 主题切换
const themeBtns = document.querySelectorAll('.theme-btn');
themeBtns.forEach(btn => {
btn.addEventListener('click', () => {
const theme = btn.dataset.theme;
// 移除所有主题类
document.body.className = '';
// 添加新主题
document.body.classList.add(`theme-${theme}`);
// 更新按钮状态
themeBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
// 保存选择
localStorage.setItem('clockTheme', theme);
});
});
// 恢复保存的主题
const savedTheme = localStorage.getItem('clockTheme');
if (savedTheme) {
document.body.className = '';
document.body.classList.add(`theme-${savedTheme}`);
themeBtns.forEach(b => {
b.classList.remove('active');
if (b.dataset.theme === savedTheme) {
b.classList.add('active');
}
});
}
</script>
</body>
</html>