看到有佬友发帖：今年是12月1日了，问问ai还有多少天过年，可以测模型有无造假
不禁感慨今年过的好快啊，好多事情还没做就过年了。
让o1-mini写了一个倒计时页面，提前祝大家新年快乐哈哈！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>中国新年倒计时</title>
<!-- 引入Google Fonts的ZCOOL KuaiLe字体 -->
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
<style>
/* 全局样式 */
body, html {
height: 100%;
width: 100%;
margin: 0;
font-family: 'ZCOOL KuaiLe', 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://pixabay.com/get/gc8c1ac60ed2fae779ed18bf1dc415e5c14b3f8d7ec9f0f6ccce46b07da50c26862c076b42cadac54a5c632d60a8ac1c83b21bb098556c0ba92e254d1fdff20ad_1280.jpg') no-repeat center center/cover;
z-index: -3;
opacity: 1.2;
}
/* 背景淡入淡出动画 */
@keyframes backgroundFade {
0% { opacity: 0.7; }
50% { opacity: 0.8; }
100% { opacity: 0.7; }
}
/* 烟花动画容器 */
.fireworks {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -2;
pointer-events: none; /* 确保点击事件不被烟花挡住 */
}
/* 烟花样式 */
.firework {
position: absolute;
bottom: 0;
background: radial-gradient(circle, #ff0000 0%, rgba(255,0,0,0) 80%);
border-radius: 50%;
opacity: 0;
animation: firework 2s ease-out infinite;
}
@keyframes firework {
0% {
transform: translateY(0) scale(1);
opacity: 1;
}
100% {
transform: translateY(-800px) scale(10.5);
opacity: 0;
}
}
/* 主容器样式 */
.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: 1.5em;
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.2em;
}
.container {
padding: 20px 25px;
}
}
/* 烟花样式调整 */
.firework {
width: 5px;
height: 20px;
background: radial-gradient(circle, #ff0000 0%, rgba(255,0,0,0) 70%);
filter: blur(2px);
}
</style>
</head>
<body>
<!-- 背景图片 -->
<div class="background"></div>
<!-- 烟花动画 -->
<div class="fireworks">
<!-- 生成多个烟花 -->
<div class="firework" style="left: 10%; animation-delay: 0s;"></div>
<div class="firework" style="left: 30%; animation-delay: 0.5s;"></div>
<div class="firework" style="left: 50%; animation-delay: 1s;"></div>
<div class="firework" style="left: 70%; animation-delay: 1.5s;"></div>
<div class="firework" style="left: 90%; animation-delay: 2s;"></div>
</div>
<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>
<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);
</script>
</body>
</html>
