效果
在任意hook文件夹新建一个 index_site_brief_after.htm 文件,放下面的代码
<style>.dynamic-clock {background: linear-gradient(135deg, #6e8efb, #a777e3);border-radius: .75rem;padding: 30px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);margin: 20px auto;max-width: 500px;color: white;font-family: 'Microsoft YaHei', sans-serif;position: relative;overflow: hidden;}.dynamic-clock::before {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);animation: rotate 20s linear infinite;z-index: 0;}@keyframes rotate {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}.clock-container { position: relative; z-index: 1; }.year-display {text-align: center;font-size: 1.3em;margin-bottom: 5px;font-weight: 600;display: flex;justify-content: center;gap: 15px;}.time-section { text-align: center; margin-bottom: 15px; }.time-display {font-size: 3.5em;font-weight: 300;letter-spacing: 2px;display: flex;justify-content: center;align-items: center;}.time-display span { margin: 0 5px; }.colon {animation: pulse 1s infinite;position: relative;top: -5px;}@keyframes pulse {0%, 100% { opacity: 1; }50% { opacity: 0.5; }}.date-section {display: flex;justify-content: space-between;margin: 15px 0;font-size: 1.1em;background: rgba(255, 255, 255, 0.15);padding: 12px;border-radius: 10px;backdrop-filter: blur(5px);}.date-item { text-align: center; flex: 1; }.date-label {font-size: 0.8em;opacity: 0.8;margin-bottom: 5px;}.date-value { font-weight: 600; }.greeting-section {text-align: center;margin: 20px 0 10px;padding-top: 15px;border-top: 1px solid rgba(255, 255, 255, 0.2);}.greeting-text {font-size: 1.5em;font-weight: 500;margin-bottom: 8px;}.greeting-tip {font-size: 0.95em;opacity: 0.9;line-height: 1.5;margin-bottom: 15px;}.next-festival {background: rgba(0, 0, 0, 0.1);padding: 10px;border-radius: 8px;font-size: 0.95em;margin-top: 10px;}.festival-message { font-weight: 600; }body.dark-theme .dynamic-clock {background: linear-gradient(135deg, #434343, #000000);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);}</style><div class="dynamic-clock"><div class="clock-container"><div class="year-display"><span>2025年</span><span>乙巳年</span><span>蛇年</span></div><div class="time-section"><div class="time-display"><span id="hours">13</span><span class="colon">:</span><span id="minutes">36</span><span class="colon">:</span><span id="seconds">00</span></div></div><div class="date-section"><div class="date-item"><div class="date-label">公历日期</div><div class="date-value" id="solar-date">9月26日</div></div><div class="date-item"><div class="date-label">农历日期</div><div class="date-value" id="lunar-date">八月初五</div></div><div class="date-item"><div class="date-label">星期</div><div class="date-value" id="weekday">星期五</div></div></div><div class="greeting-section"><div class="greeting-text" id="greeting">下午好</div><div class="greeting-tip" id="tip">金秋时节,愿您收获满满</div><div class="next-festival" id="next-festival"><div class="festival-message">距离国庆节还有5天</div></div></div></div></div><script>// 农历计算函数
function getLunarDate(date) {
const lunarInfo = [0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,0x06ca0,0x0b550,0x15355,0x04da0,0x0a5b0,0x14573,0x052b0,0x0a9a8,0x0e950,0x06aa0,0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b6a0,0x195a6,0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0];
const nStr3 = ['正','二','三','四','五','六','七','八','九','十','冬','腊'];
function leapMonth(y) { return lunarInfo[y-1900] & 0xf; }
function leapDays(y) { return leapMonth(y) ? ((lunarInfo[y-1900] & 0x10000) ? 30 : 29) : 0; }
function yearDays(y) { let sum = 348; for(let i=0x8000; i>0x8; i>>=1) sum += (lunarInfo[y-1900] & i) ? 1 : 0; return sum + leapDays(y); }
function monthDays(y, m) { return (lunarInfo[y-1900] & (0x10000>>m)) ? 30 : 29; }
let baseDate = new Date(1900,0,31);
let offset = Math.floor((date - baseDate)/86400000);
let i, temp = 0;
for(i=1900; i<2050 && offset>0; i++) {
temp = yearDays(i);
offset -= temp;
}
if(offset<0) { offset += temp; i--; }
let year = i;
let leap = leapMonth(i);
let isLeap = false;
for(i=1; i<13 && offset>0; i++) {
if(leap>0 && i==(leap+1) && !isLeap) {
--i; isLeap = true; temp = leapDays(year);
} else {
temp = monthDays(year, i);
}
if(isLeap && i==(leap+1)) isLeap = false;
offset -= temp;
if(!isLeap) ;
}
if(offset==0 && leap>0 && i==leap+1) {
if(isLeap) { isLeap = false; } else { isLeap = true; --i; }
}
if(offset<0) { offset += temp; --i; }
let month = i;
let day = offset + 1;
// 格式化显示
let monthStr = nStr3[month-1] + '月';
let dayStr;
if (day <= 10) {
dayStr = '初' + ['日','一','二','三','四','五','六','七','八','九','十'][day];
} else if (day < 20) {
dayStr = '十' + ['日','一','二','三','四','五','六','七','八','九'][day-10];
} else if (day === 20) {
dayStr = '二十';
} else if (day < 30) {
dayStr = '廿' + ['日','一','二','三','四','五','六','七','八','九'][day-20];
} else if (day === 30) {
dayStr = '三十';
} else {
dayStr = '卅' + ['日','一','二','三','四','五','六','七','八','九'][day-30];
}
return monthStr + dayStr;
}
// 2025年重要节日(国家授时中心数据)
const festivals = [
{ name: "国庆节", date: new Date(2025, 9, 1), message: "🇨🇳 国庆快乐!盛世华诞,普天同庆" },
{ name: "中秋节", date: new Date(2025, 9, 6), message: "🎑 中秋快乐!月圆人团圆" },
{ name: "元旦", date: new Date(2026, 0, 1), message: "🎉 元旦快乐!新年新气象" },
{ name: "春节", date: new Date(2026, 1, 17), message: "🧧 春节快乐!乙巳年大吉" }
];
function updateTime() {
const now = new Date();
const hours = now.getHours();
// 更新时间显示
document.getElementById('hours').textContent = hours.toString().padStart(2,'0');
document.getElementById('minutes').textContent = now.getMinutes().toString().padStart(2,'0');
document.getElementById('seconds').textContent = now.getSeconds().toString().padStart(2,'0');
// 更新日期显示
document.getElementById('solar-date').textContent = `${now.getMonth()+1}月${now.getDate()}日`;
document.getElementById('weekday').textContent = `星期${'日一二三四五六'[now.getDay()]}`;
// 更新农历显示
document.getElementById('lunar-date').textContent = getLunarDate(now);
// 更新问候语
updateGreeting(hours);
// 更新节日提醒
updateFestivalReminder(now);
}
function updateGreeting(hours) {
let greeting, tip;
if (hours < 5) {
greeting = "深夜好";
tip = "夜深人静,注意休息";
} else if (hours < 8) {
greeting = "清晨好";
tip = "晨光熹微,一日之计在于晨";
} else if (hours < 11) {
greeting = "上午好";
tip = "精力充沛,工作顺利";
} else if (hours < 13) {
greeting = "中午好";
tip = "午间小憩,补充能量";
} else if (hours < 18) {
greeting = "下午好";
tip = "金秋时节,愿您收获满满";
} else if (hours < 22) {
greeting = "晚上好";
tip = "华灯初上,享受闲暇时光";
} else {
greeting = "夜深了";
tip = "早睡早起,养生之道";
}
document.getElementById('greeting').textContent = greeting;
document.getElementById('tip').textContent = tip;
}
function updateFestivalReminder(now) {
const oneDay = 24 * 60 * 60 * 1000;
let nextFestival = null;
let minDays = Infinity;
// 找出最近的未来节日
festivals.forEach(fest => {
const diffDays = Math.ceil((fest.date - now) / oneDay);
if (diffDays >= 0 && diffDays < minDays) {
minDays = diffDays;
nextFestival = fest;
}
});
// 更新显示
const festivalEl = document.getElementById('next-festival');
if (nextFestival) {
if (minDays === 0) {
festivalEl.innerHTML = `<div class="festival-message">${nextFestival.message}</div>`;
} else {
festivalEl.innerHTML = `<div class="festival-message">距离${nextFestival.name}还有${minDays}天</div>`;
}
} else {
festivalEl.style.display = 'none';
}
}
// 初始化
document.addEventListener('DOMContentLoaded', () => {
updateTime();
setInterval(updateTime, 1000);
// 暗色模式适配
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark-theme');
}
});
</script>
收藏的用户(1)
X
正在加载信息~
暂无评论