数字时钟特效

ziblog

已于 2025-06-27 15:27:04 修改

阅读量402

点赞数 5

CC 4.0 BY-SA版权

文章标签： css javascript 前端

于 2025-04-30 15:01:17 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147633137

<!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>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #1a1a2e, #16213e);
font-family: 'Arial', sans-serif;
overflow: hidden;
}

.clock-container {
position: relative;
text-align: center;
}

.clock {
font-size: 5rem;
color: #fff;
text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
margin-bottom: 20px;
}

.date {
font-size: 1.5rem;
color: #fff;
opacity: 0.8;
}

.footer {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 0.8rem;
}

.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

.particle {
position: absolute;
background-color: rgba(0, 255, 255, 0.5);
border-radius: 50%;
pointer-events: none;
}
</style>
</head>
<body>
<div class="clock-container">
<div class="clock" id="clock">00:00:00</div>
<div class="date" id="date">2023年1月1日星期一</div>
</div>

<div class="particles" id="particles"></div>

<div class="footer">

</div>

<script>
function updateClock() {
const now = new Date();

// 更新时间
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;

// 更新日期
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const weekday = weekdays[now.getDay()];
document.getElementById('date').textContent = `${year}年${month}月${day}日 ${weekday}`;

// 随机改变文字阴影颜色
const colors = ['#00ffff', '#ff00ff', '#ffff00', '#00ff00', '#ff0000', '#0000ff'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
document.getElementById('clock').style.textShadow =
`0 0 10px ${randomColor}, 0 0 20px ${randomColor}, 0 0 30px ${randomColor}`;
}

// 创建粒子效果
function createParticles() {
const particlesContainer = document.getElementById('particles');
particlesContainer.innerHTML = '';

for (let i = 0; i < 50; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');

const size = Math.random() * 5 + 1;
const posX = Math.random() * window.innerWidth;
const posY = Math.random() * window.innerHeight;
const opacity = Math.random() * 0.5 + 0.1;
const animationDuration = Math.random() * 10 + 5;

particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.left = `${posX}px`;
particle.style.top = `${posY}px`;
particle.style.opacity = opacity;
particle.style.animation = `float ${animationDuration}s infinite ease-in-out`;

particlesContainer.appendChild(particle);
}
}

// 添加浮动动画
const style = document.createElement('style');
style.textContent = `
@keyframes float {
0%, 100% {
transform: translateY(0) translateX(0);
}
50% {
transform: translateY(-20px) translateX(10px);
}
}
`;
document.head.appendChild(style);

// 初始化
updateClock();
createParticles();
setInterval(updateClock, 1000);

// 窗口大小改变时重新创建粒子
window.addEventListener('resize', createParticles);
</script>
</body>
</html>