Spaces:

ApiCheck
/

NY

Running

App Files Files Community

NY / index.html

ApiCheck

Update index.html

82d1101 verified over 1 year ago

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>