Hugging Face's logo

Spaces:
ApiCheck
/
NY
Running

App Files Community
NY / index.html
ApiCheck's picture
ApiCheck
Update index.html
82d1101 verified
Raw History Blame Contribute Delete
12.8 kB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>中国春节倒计时</title>
<!-- 引入Google Fonts的Ma Shan Zheng字体 -->
<link href="https://ooo.0x0.ooo/2024/12/25/OEFMXM.jpg" rel="stylesheet">
<style>
/* 全局样式 */
body, html {
height: 100%;
width: 100%;
margin: 0;
font-family: 'Ma Shan Zheng', cursive;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
/* 背景图片样式 */
.background {
position: absolute;
width: 100%;
height: 100%;
background: url('https://s2.loli.net/2024/12/29/eMjyY6b1lQgdPGN.png') no-repeat center center/cover;
z-index: -3;
opacity: 1.2;
}
/* 烟花画布 */
#fireworks-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* 确保烟花在背景之上，内容之下 */
pointer-events: none; /* 确保点击事件不被烟花遮挡 */
}
/* 主容器样式 */
.container {
text-align: center;
padding: 30px 40px;
background: rgba(0, 0, 0, 0.6);
border-radius: 20px;
box-shadow: 0 0 30px rgba(0,0,0,0.7);
animation: fadeIn 1s ease-out;
z-index: 1; /* 确保内容在烟花之上 */
}
/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
h1 {
font-size: 2.5em;
margin-bottom: 15px;
font-weight: bold;
color: #FFD700;
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
animation: glow 2s infinite alternate;
}
.time, .cny-date, .countdown {
font-size: 2em; /* 增大时钟字体 */
margin: 15px 0;
animation: fadeInUp 1.5s ease-out;
}
/* 文字动画 */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* 文字发光效果 */
@keyframes glow {
from { text-shadow: 2px 2px 8px rgba(255,215,0,0.7); }
to { text-shadow: 2px 2px 20px rgba(255,215,0,1); }
}
/* 响应式设计 */
@media (max-width: 600px) {
h1 {
font-size: 1.8em;
}
.time, .cny-date, .countdown {
font-size: 1.5em; /* 移动端适当减小字体 */
}
.container {
padding: 20px 25px;
}
}
/* 底部滚动字幕 */
.scrolling-message {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
font-size: 65px;
color: yellow;
background-color: rgba(0, 0, 0, 0.4);
padding: 10px 0;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.scrolling-message span {
display: inline-block;
padding-left: 100%; /* 初始位置在屏幕右侧 */
animation: scrollText 26s linear infinite; /* 减慢滚动速度 */
}
@keyframes scrollText {
0% {
transform: translateX(0); /* 从屏幕右侧边缘开始 */
}
100% {
transform: translateX(-100%); /* 滚动到屏幕左侧 */
}
}
/* 禁止声音按钮 */
.sound-btn {
position: fixed;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.sound-btn svg {
fill: white;
width: 24px;
height: 24px;
}
</style>
</head>
<body>
<!-- 背景图片 -->
<div class="background"></div>
<!-- 烟花画布 -->
<canvas id="fireworks-canvas"></canvas>
<!-- 主内容 -->
<div class="container">
<h1>中国春节倒计时</h1>
<div class="time">当前时间：<span id="currentTime">--:--:--</span></div>
<div class="cny-date">中国春节日期：<span id="cnyDate">--</span></div>
<div class="countdown">倒计时：<span id="countdown">--天 --小时 --分钟 --秒</span></div>
</div>
<!-- 在页面底部添加滚动字幕 -->
<div class="scrolling-message">
<span>LINUX DO年度寄语：愿新的一年，我们继续在技术海洋中携手成长！我为人人，人人为我，真诚、友善地对待他人，不以一己私利为重，这就是LINUX DO！</span>
</div>
<script>
// 当前时间和倒计时
const currentTimeEl = document.getElementById('currentTime');
const cnyDateEl = document.getElementById('cnyDate');
const countdownEl = document.getElementById('countdown');
// 中国春节日期（2020-2030）
const cnyDates = {
2020: '2020-01-25',
2021: '2021-02-12',
2022: '2022-02-01',
2023: '2023-01-22',
2024: '2024-02-10',
2025: '2025-01-29',
2026: '2026-02-17',
2027: '2027-02-06',
2028: '2028-01-26',
2029: '2029-02-13',
2030: '2030-02-03'
};
function updateTime() {
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');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
currentTimeEl.textContent = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
// 获取中国春节日期
let cnyYear = year;
let cnyDateStr = cnyDates[cnyYear];
let cnyDate = cnyDateStr ? new Date(cnyDateStr + 'T00:00:00') : null;
// 如果今年的中国春节已经过去，使用明年的
if (cnyDate && now > cnyDate) {
cnyYear += 1;
cnyDateStr = cnyDates[cnyYear];
if(cnyDateStr){
cnyDate = new Date(cnyDateStr + 'T00:00:00');
} else {
// 如果超出预设年份，提示无法计算
cnyDateEl.textContent = '无法计算';
countdownEl.textContent = '--';
return;
}
}
if (cnyDate) {
const cnyMonth = String(cnyDate.getMonth() + 1).padStart(2, '0');
const cnyDay = String(cnyDate.getDate()).padStart(2, '0');
cnyDateEl.textContent = `${cnyYear}-${cnyMonth}-${cnyDay}`;
// 计算倒计时
const diff = cnyDate - now;
if(diff <=0){
countdownEl.textContent = '今天是中国春节！';
return;
}
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hoursLeft = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutesLeft = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const secondsLeft = Math.floor((diff % (1000 * 60)) / 1000);
countdownEl.textContent = `${days}天 ${hoursLeft}小时 ${minutesLeft}分钟 ${secondsLeft}秒`;
} else {
// 如果无法获取中国春节日期
cnyDateEl.textContent = '无法计算';
countdownEl.textContent = '--';
}
}
// 更新每秒
updateTime();
setInterval(updateTime, 1000);
// 烟花效果
const canvas = document.getElementById('fireworks-canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 烟花粒子类
class Particle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.radius = Math.random() * 2 + 1;
this.velocity = {
x: (Math.random() - 0.5) * 5,
y: (Math.random() - 0.5) * 5
};
this.alpha = 1;
}
draw() {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}
update() {
this.draw();
this.x += this.velocity.x;
this.y += this.velocity.y;
this.alpha -= 0.01;
}
}
// 烟花类
class Firework {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.particles = [];
for (let i = 0; i < 100; i++) {
this.particles.push(new Particle(this.x, this.y, this.color));
}
}
update() {
this.particles.forEach((particle, index) => {
if (particle.alpha <= 0) {
this.particles.splice(index, 1);
} else {
particle.update();
}
});
}
}
// 烟花数组
let fireworks = [];
// 动画循环
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布，保留背景
fireworks.forEach((firework, index) => {
if (firework.particles.length === 0) {
fireworks.splice(index, 1);
} else {
firework.update();
}
});
}
// 随机生成烟花
function createFirework() {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const color = `hsl(${Math.random() * 360}, 50%, 50%)`;
fireworks.push(new Firework(x, y, color));
}
// 每 500 毫秒生成一个烟花
setInterval(createFirework, 500);
// 开始动画
animate();
// 禁止声音按钮逻辑
//const soundBtn = document.querySelector('.sound-btn');
//let isSoundOn = true;
//soundBtn.addEventListener('click', () => {
// isSoundOn = !isSoundOn;
// soundBtn.innerHTML = isSoundOn
// ? '<path id="icon-sound-on" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>'
// : '<path id="icon-sound-off" d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>';
//});
</script>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"8f992b9bee3fd049","version":"2024.10.5","r":1,"token":"2a84cf81469744fabd107d17169c271a","serverTiming":{"name":{"cfExtPri":true,"cfL4":true,"cfSpeedBrain":true,"cfCacheStatus":true}}}' crossorigin="anonymous"></script>
</body>
</html>