<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>现代数字时钟</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Arial, sans-serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #667eea, #764ba2);
transition: background 0.5s ease;
padding: 20px;
}
body.dark-mode {
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
}
.clock-container {
width: 100%;
max-width: 800px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
padding: 40px 30px;
text-align: center;
}
.title {
color: white;
font-size: 2.5rem;
margin-bottom: 30px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.time-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
flex-wrap: wrap;
}
.time-part {
margin: 0 15px;
position: relative;
}
.time-label {
color: rgba(255, 255, 255, 0.8);
font-size: 1.2rem;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 2px;
}
.time-display {
background: rgba(0, 0, 0, 0.25);
border-radius: 15px;
padding: 20px 25px;
min-width: 130px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.time-value {
font-size: 4.5rem;
font-weight: 700;
color: white;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
}
.colon {
color: white;
font-size: 4rem;
font-weight: bold;
margin: 0 5px;
opacity: 0.7;
}
.ampm {
background: rgba(255, 255, 255, 0.2);
color: white;
font-size: 1.5rem;
font-weight: bold;
padding: 10px 15px;
border-radius: 10px;
margin-top: 20px;
display: inline-block;
}
.date-container {
margin-top: 30px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
}
.date-display {
font-size: 1.8rem;
color: white;
font-weight: 500;
letter-spacing: 1px;
}
.controls {
margin-top: 30px;
display: flex;
justify-content: center;
gap: 20px;
}
.btn {
background: rgba(255, 255, 255, 0.2);
color: white;
border: none;
padding: 12px 25px;
font-size: 1.1rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-3px);
}
@media (max-width: 768px) {
.title {
font-size: 2rem;
}
.time-value {
font-size: 3.5rem;
}
.time-display {
min-width: 100px;
padding: 15px 20px;
}
.colon {
font-size: 3rem;
}
}
@media (max-width: 480px) {
.time-container {
flex-direction: column;
gap: 10px;
}
.time-part {
margin: 10px 0;
}
.colon {
display: none;
}
.time-value {
font-size: 3rem;
}
.title {
font-size: 1.8rem;
}
}
.pulse {
animation: pulse 0.5s ease-in-out;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="clock-container">
<h1 class="title">现代数字时钟</h1>
<div class="time-container">
<div class="time-part">
<div class="time-label">小时</div>
<div class="time-display">
<span id="hours" class="time-value">00</span>
</div>
</div>
<div class="colon">:</div>
<div class="time-part">
<div class="time-label">分钟</div>
<div class="time-display">
<span id="minutes" class="time-value">00</span>
</div>
</div>
<div class="colon">:</div>
<div class="time-part">
<div class="time-label">秒钟</div>
<div class="time-display">
<span id="seconds" class="time-value">00</span>
</div>
</div>
</div>
<div class="ampm" id="ampm">AM</div>
<div class="date-container">
<div class="date-display" id="date">2023年10月15日 星期日</div>
</div>
<div class="controls">
<button class="btn" id="themeToggle">切换深色模式</button>
</div>
</div>
<script>
// 获取DOM元素
const hoursElement = document.getElementById('hours');
const minutesElement = document.getElementById('minutes');
const secondsElement = document.getElementById('seconds');
const ampmElement = document.getElementById('ampm');
const dateElement = document.getElementById('date');
const themeToggle = document.getElementById('themeToggle');
// 星期数组
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
// 月份数组
const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
// 更新时间
function updateTime() {
const now = new Date();
// 获取时间部分
let hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 设置AM/PM
const ampm = hours >= 12 ? 'PM' : 'AM';
// 转换为12小时制
hours = hours % 12 || 12;
// 更新显示
hoursElement.textContent = hours.toString().padStart(2, '0');
minutesElement.textContent = minutes.toString().padStart(2, '0');
secondsElement.textContent = seconds.toString().padStart(2, '0');
ampmElement.textContent = ampm;
// 添加秒数变化的动画
secondsElement.classList.remove('pulse');
void secondsElement.offsetWidth; // 触发重绘
secondsElement.classList.add('pulse');
// 更新日期
const year = now.getFullYear();
const month = months[now.getMonth()];
const day = now.getDate();
const weekday = weekdays[now.getDay()];
dateElement.textContent = `${year}年${month}${day}日 ${weekday}`;
}
// 切换主题
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
themeToggle.textContent = document.body.classList.contains('dark-mode')
? '切换浅色模式'
: '切换深色模式';
});
// 初始化时间
updateTime();
// 每秒更新一次
setInterval(updateTime, 1000);
</script>
</body>
</html>
扫一扫
7235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
