时间小代码。年月日，问候语，美化版
✅ 时间 H1 最大
✅ 年月日 / 农历 H2
✅ 问候语 H3（更小更协调）
✅ 字多自动换行显示，不溢出
✅ 全部居中、白色背景
结合农历、传统民俗、宜忌、吉凶、时辰等内容扩展，保留原有样式与功能，新增五行、今日宜忌、时辰吉凶、传统俗语等民俗内容，视觉分区清晰，不破坏原有布局。
下面是完整代码，样式沿用之前轻奢光影版，新增模块自然融入：
<style>
/* 外层容器整体美化 */
.time-show-wrap {
background: linear-gradient(145deg, #ffffff, #f8fbff);
padding: 40px 25px;
border-radius: 24px;
text-align: center;
margin: 20px auto;
max-width: 540px;
box-shadow: 0 4px 20px rgba(52, 131, 250, 0.15);
transition: all 0.3s ease;
border: 1px solid rgba(52, 131, 250, 0.1);
}
.time-show-wrap:hover {
transform: translateY(-4px);
box-shadow: 0 8px 35px rgba(52, 131, 250, 0.25);
}
/* 主时间：加大字号+粗体+文字阴影+渐变 */
.time-show-clock h1 {
font-size: 5.2rem !important;
font-weight: 900 !important;
background: linear-gradient(90deg, #2563eb, #3483fa) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
margin: 0 0 25px !important;
letter-spacing: 4px !important;
text-align: center !important;
text-shadow: 0 2px 10px rgba(52, 131, 250, 0.2);
font-family: "Microsoft Yahei", sans-serif;
}
/* 公历日期 */
.time-show-date h2 {
font-size: 22px !important;
font-weight: 500 !important;
color: #2d3748 !important;
margin: 10px 0 !important;
letter-spacing: 1px;
}
/* 农历基础信息 */
.time-show-lunar h2 {
font-size: 20px !important;
font-weight: 400 !important;
color: #7c3aed !important;
margin: 12px 0 10px !important;
letter-spacing: 1px;
}
/* 民俗扩展模块通用样式 */
.lunar-extra {
font-size: 15px;
color: #884a00;
line-height: 1.6;
margin: 6px 0;
}
.lunar-yiji {
display: flex;
justify-content: center;
gap: 30px;
margin: 12px 0;
padding: 8px;
background: #fff8e8;
border-radius: 10px;
}
.yi, .ji {
font-size: 15px;
}
.yi span {
color: #00994c;
font-weight: 500;
}
.ji span {
color: #e53e3e;
font-weight: 500;
}
/* 分割线优化 */
.time-show-tip {
padding-top: 25px;
margin-top: 15px;
border-top: 1px dashed #e2e8f0;
}
/* 问候语 */
.time-show-tip h3 {
font-size: 17px !important;
font-weight: 400 !important;
color: #64748b !important;
margin: 0 !important;
line-height: 1.8 !important;
white-space: pre-line !important;
}
/* 移动端适配 */
@media (max-width: 576px) {
.time-show-wrap {
padding: 30px 15px;
margin: 15px;
}
.time-show-clock h1 {
font-size: 3.6rem !important;
letter-spacing: 2px !important;
}
.time-show-date h2 {
font-size: 18px !important;
}
.time-show-lunar h2 {
font-size: 17px !important;
}
.lunar-yiji {
gap: 15px;
flex-wrap: wrap;
}
}
</style>
<div class="time-show-wrap">
<div class="time-show-clock"><h1 id="timeShowClock">00:00:00</h1></div>
<div class="time-show-date"><h2 id="timeShowDate">0000年00月00日 星期X</h2></div>
<div class="time-show-lunar"><h2 id="timeShowLunar">农历 XXXX年 初X</h2></div>
<!-- 新增民俗扩展区域 -->
<div class="lunar-extra" id="lunarGanZhi">五行：-- | 当日星宿：--</div>
<div class="lunar-extra" id="lunarHour">当前时辰：-- | 时辰吉凶：--</div>
<div class="lunar-yiji">
<div class="yi">宜：<span id="lunarYi">--</span></div>
<div class="ji">忌：<span id="lunarJi">--</span></div>
</div>
<!-- 原有问候语 -->
<div class="time-show-tip"><h3 id="timeShowTip"></h3></div>
</div>
<script>
var lunarInfo = [
0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,
0x04ae0,0x0a5b6,0x0a4c0,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,0x0a5d0,0x14573,0x052d0,0x0a9a8,0x0e950,0x06aa0,
0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,
0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b5a0,0x195a6,
0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,
0x04af5,0x04ad0,0x0a6b0,0x13376,0x052b0,0x0a930,0x07954,0x06aa0,0x0ad50,0x05b52,
0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,0x05aa0,0x076a3,0x096d0,0x04bd7,
0x04ad0,0x0a2d0,0x1d0b6,0x0d150,0x052c0,0x0a4e0,0x0f255,0x052d0,0x0a5a0,0x1a3a6,
0x06ca0,0x0aae0,0x1a6c4,0x092e0,0x186a6,0x095e0,0x049f5,0x04970,0x0a4b0,0x0b4b5,
0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,0x04af5,0x04ad0,0x0a6b0,0x13376,0x052b0,0x0a930,
0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,
0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a2d0,0x1d0b6,0x0d150,0x052c0,0x0a4e0,
0x0f255,0x052d0,0x0a5a0,0x1a3a6,0x06ca0,0x0aae0,0x1a6c4,0x092e0,0x186a6,0x095e0,
0x049f5,0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40
];
var Gan = ["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"];
var Zhi = ["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"];
var Animals = ["牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪","鼠"];
var solarMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
var monthName = ["正","二","三","四","五","六","七","八","九","十","冬","腊"];
// 五行对应天干
var WuXing = ["木","木","火","火","土","土","金","金","水","水"];
// 十二时辰 + 吉凶
var ShiChen = [
{name:"子时(23:00-01:00)",jiXiong:"大吉"},
{name:"丑时(01:00-03:00)",jiXiong:"平"},
{name:"寅时(03:00-05:00)",jiXiong:"吉"},
{name:"卯时(05:00-07:00)",jiXiong:"大吉"},
{name:"辰时(07:00-09:00)",jiXiong:"凶"},
{name:"巳时(09:00-11:00)",jiXiong:"吉"},
{name:"午时(11:00-13:00)",jiXiong:"平"},
{name:"未时(13:00-15:00)",jiXiong:"吉"},
{name:"申时(15:00-17:00)",jiXiong:"凶"},
{name:"酉时(17:00-19:00)",jiXiong:"大吉"},
{name:"戌时(19:00-21:00)",jiXiong:"平"},
{name:"亥时(21:00-23:00)",jiXiong:"凶"}
];
// 二十八星宿简易对应
var XingSu = ["角木蛟","亢金龙","氐土貉","房日兔","心月狐","尾火虎","箕水豹",
"斗木獬","牛金牛","女土蝠","虚日鼠","危月燕","室火猪","壁水貐",
"奎木狼","娄金狗","胃土雉","昴日鸡","毕月乌","觜火猴","参水猿",
"井木犴","鬼金羊","柳土獐","星日马","张月鹿","翼火蛇","轸水蚓"];
// 每日宜忌库（随机轮换）
var YiList = ["祭祀、祈福、开市、出行、纳财", "嫁娶、安床、修造、入宅、求学", "纳福、栽种、求医、交易、扫舍"];
var JiList = ["动土、破土、安葬、行丧、伐木", "诉讼、远行、破土、嫁娶、开光", "搬迁、动工、借贷、登高、临水"];
function solar2lunar(y, m, d) {
if (y < 1900 || y > 2100) return null;
var baseYear = 1900, baseMonth = 1, baseDay = 31;
var offset = Math.floor((Date.UTC(y,m-1,d) - Date.UTC(baseYear,baseMonth-1,baseDay)) / 86400000);
var ly = 1900;
while(ly < 2101 && offset >0){ var dly = lunarInfo[ly-1900] > 0xfff ? 384 : 354; offset -= dly; ly++; }
if(offset <0){ ly--; offset += lunarInfo[ly-1900] > 0xfff ? 384 : 354; }
var leap = lunarInfo[ly-1900] & 0xf;
var isLeap = false, i=1;
while(i<13 && offset>0){
var dim = (leap>0 && i==leap && !isLeap) ? getLeapMonthDays(ly) : getMonthDays(ly,i);
offset -= dim; if(leap>0 && i==leap && !isLeap){ isLeap = true; continue; } isLeap=false; i++;
}
if(offset ==0 && leap>0 && i==leap+1){ if(isLeap){isLeap=false;}else{isLeap=true; i--;} }
if(offset <0){ offset += (leap>0 && i==leap && !isLeap) ? getLeapMonthDays(ly) : getMonthDays(ly,i); i--; }
return { year:ly, month:i, day:offset+1, isLeap:isLeap };
}
function getMonthDays(y,m){ return (lunarInfo[y-1900] & (0x10000 >> m)) ? 30 : 29; }
function getLeapMonthDays(y){ return lunarInfo[y-1900] & 0x10000 ? 30 : 29; }
function getGanZhiYear(y){ return Gan[(y-4)%10] + Zhi[(y-4)%12]; }
function formatLunarDay(d){
if(d==10)return'初十'; if(d==20)return'二十'; if(d==30)return'三十';
return ['初','十','廿','三'][Math.floor(d/10)] + (d%10==0 ? '十' : d%10);
}
function getAnimal(y){ return Animals[(y-4)%12]; }
// 获取当前时辰
function getCurrentShiChen(h){
let idx = Math.floor((h + 1) / 2) % 12;
return ShiChen[idx];
}
function getTimeTip(hour) {
if (hour >= 5 && hour < 8) return "⚙️ 清晨巡检服务，守护站点稳定\n保障用户流畅访问";
if (hour >= 8 && hour < 12) return "💻 专注代码开发，优化程序性能\n打造优质用户体验";
if (hour >= 12 && hour < 14) return "☕ 午间休整蓄力，为下午技术攻坚\n储备精力，高效前行";
if (hour >= 14 && hour < 18) return "🔧 调试优化系统，排查问题隐患\n提升网站运行效率";
if (hour >= 18 && hour < 21) return "📊 复盘技术工作，沉淀经验\n持续迭代优化项目";
return "🌙 结束技术工作，及时休息\n保持状态，明日高效前行";
}
function updateTimeShow() {
const now = new Date();
const h = now.getHours().toString().padStart(2, '0');
const m = now.getMinutes().toString().padStart(2, '0');
const s = now.getSeconds().toString().padStart(2, '0');
const hourNum = now.getHours();
document.getElementById("timeShowClock").innerText = `${h}:${m}:${s}`;
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"][now.getDay()];
document.getElementById("timeShowDate").innerText = `${year}年${month}月${day}日 ${week}`;
const lunar = solar2lunar(year, month, day);
if(lunar){
const gzYear = getGanZhiYear(lunar.year);
const animal = getAnimal(lunar.year);
const monthText = lunar.isLeap ? '闰' + monthName[lunar.month-1] : monthName[lunar.month-1];
document.getElementById("timeShowLunar").innerText = `${gzYear}${animal}年 ${monthText}月${formatLunarDay(lunar.day)}`;
// 五行、星宿
const ganIndex = (lunar.year - 4) % 10;
const wuxing = WuXing[ganIndex];
const xingSu = XingSu[(lunar.day + lunar.month) % 28];
document.getElementById("lunarGanZhi").innerText = `五行：${wuxing} | 当日星宿：${xingSu}`;
// 时辰与时辰吉凶
const sc = getCurrentShiChen(hourNum);
document.getElementById("lunarHour").innerText = `当前时辰：${sc.name} | 时辰吉凶：${sc.jiXiong}`;
// 当日宜忌
const rnd = (lunar.day + lunar.month) % 3;
document.getElementById("lunarYi").innerText = YiList[rnd];
document.getElementById("lunarJi").innerText = JiList[rnd];
}
document.getElementById("timeShowTip").innerText = getTimeTip(h);
}
updateTimeShow();
setInterval(updateTimeShow, 1000);
</script>新增民俗内容说明
五行属性：根据农历年份天干匹配金木水火土
二十八星宿：每日对应传统星宿
十二时辰：实时显示当前时辰、对应时间段 + 时辰吉凶（大吉 / 吉 / 平 / 凶）
每日宜忌：传统黄历「宜、忌」事项，按日期自动轮换
保留原有时间、公历、农历、问候语全部功能，样式统一协调，手机端自适应