本次新增民俗项一览
冲煞：每日对应相冲生肖、煞向方位
胎神方位：传统居家胎神占位方位
值日星君：十二值日神（青龙 / 白虎 / 朱雀等）
生肖运势：每日随机匹配传统运势断语
八卦卦象：每日轮换六爻卦象与释义
目前已集成：公历时间 + 农历干支 + 生肖 + 五行 + 二十八星宿 + 十二时辰 + 时辰吉凶 + 冲煞 + 胎神 + 值日星君 + 黄历宜忌 + 生肖运势 + 八卦卦象，整套完整黄历民俗内容。
整合 彭祖百忌、黄道黑道、每日吉时 / 凶时，同时优化排版、配色，保持原有全部功能，布局错落清晰，移动端完美适配，整套传统黄历民俗内容齐全。
完整可直接使用代码：
<style>
/* 外层容器整体美化 */
.time-show-wrap {
background: linear-gradient(145deg, #ffffff, #f8fbff);
padding: 40px 25px;
border-radius: 24px;
text-align: center;
margin: 20px auto;
max-width: 620px;
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-info-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
font-size: 14px;
color: #92400e;
margin: 8px 0;
}
/* 彭祖百忌、黄道黑道区块 */
.lunar-text-block {
font-size: 14px;
color: #78350f;
background: #fffaf0;
border-radius: 8px;
padding: 8px 12px;
margin: 8px auto;
max-width: 540px;
line-height: 1.7;
}
/* 宜忌区块 */
.lunar-yiji {
display: flex;
justify-content: center;
gap: 30px;
margin: 12px auto;
padding: 10px;
background: #fff8e8;
border-radius: 10px;
max-width: 540px;
}
.yi, .ji {
font-size: 15px;
}
.yi span {
color: #00994c;
font-weight: 500;
}
.ji span {
color: #e53e3e;
font-weight: 500;
}
/* 吉凶时辰区块 */
.lunar-time-block {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 25px;
font-size: 14px;
margin: 8px auto;
padding: 8px;
background: #fef6e7;
border-radius: 8px;
max-width: 540px;
}
.good-time {
color: #047857;
}
.bad-time {
color: #b91c1c;
}
/* 运势卦象 */
.lunar-fortune {
font-size: 14px;
color: #78350f;
background: #fffaf0;
border-radius: 8px;
padding: 8px;
margin: 8px auto;
max-width: 540px;
line-height: 1.7;
}
/* 分割线 */
.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, .lunar-time-block {
gap: 15px;
flex-wrap: wrap;
}
.lunar-info-row {
gap: 10px;
}
}
</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-info-row">
<div id="lunarChongSha">冲煞：--</div>
<div id="lunarTaiShen">胎神：--</div>
<div id="lunarZhiXing">值日星君：--</div>
</div>
<!-- 黄道/黑道 -->
<div class="lunar-text-block" id="lunarHuangDao">黄道黑道：--</div>
<!-- 彭祖百忌 -->
<div class="lunar-text-block" id="lunarPengZu">彭祖百忌：--</div>
<!-- 每日宜/忌 -->
<div class="lunar-yiji">
<div class="yi">宜：<span id="lunarYi">--</span></div>
<div class="ji">忌：<span id="lunarJi">--</span></div>
</div>
<!-- 全天吉时、凶时 -->
<div class="lunar-time-block">
<div class="good-time">当日吉时：<span id="lunarGoodTime">--</span></div>
<div class="bad-time">当日凶时：<span id="lunarBadTime">--</span></div>
</div>
<!-- 生肖运势 + 八卦卦象 -->
<div class="lunar-fortune" id="lunarFortune">生肖运势：-- | 今日卦象：--</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 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 ChongSha = [
"冲鼠(壬子)煞北","冲牛(癸丑)煞西","冲虎(甲寅)煞南","冲兔(乙卯)煞东",
"冲龙(丙辰)煞北","冲蛇(丁巳)煞西","冲马(戊午)煞南","冲羊(己未)煞东",
"冲猴(庚申)煞北","冲鸡(辛酉)煞西","冲狗(壬戌)煞南","冲猪(癸亥)煞东"
];
// 胎神方位
var TaiShen = [
"占门厕外正北","占碓磨房内南","占床仓碓磨西","占房床门外东",
"占房床西北","占厨灶西北","占道路西南","占房床南",
"占炉灶北","占大门外西","占房床东","占神厨堂内"
];
// 值日星君
var ZhiXing = ["青龙","明堂","天刑","朱雀","金匮","天德","白虎","玉堂","天牢","玄武","司命","勾陈"];
// 黄道黑道
var HuangDao = ["黄道吉日","黄道吉日","黑道凶日","黑道凶日","黄道吉日","黄道吉日",
"黑道凶日","黄道吉日","黑道凶日","黑道凶日","黄道吉日","黑道凶日"];
// 彭祖百忌
var PengZu = [
"甲不开仓财物耗散，子不问卜自惹祸殃",
"乙不栽植千株不长，丑不冠带主不还乡",
"丙不修灶必见灾殃，寅不祭祀神鬼不尝",
"丁不剃头头必生疮，卯不穿井水泉不香",
"戊不受田田主不祥，辰不哭泣必主重丧",
"己不破券二比并亡，巳不远行财物伏藏",
"庚不经络织机虚张，午不苫盖屋主更张",
"辛不合酱主人不尝，未不服药毒气入肠",
"壬不汲水更难提防，申不安床鬼祟入房",
"癸不词讼理弱敌强，酉不宴客醉坐颠狂",
"甲不开仓财物耗散，戌不吃犬作怪上床",
"乙不栽植千株不长，亥不嫁娶不利新郎"
];
// 全天吉时、凶时
var AllGoodTime = ["子时、卯时、酉时","寅时、巳时、未时","卯时、酉时、寅时"];
var AllBadTime = ["辰时、申时、亥时","辰时、申时、亥时","辰时、申时、午时"];
// 宜忌
var YiList = [
"祭祀、祈福、开市、出行、纳财",
"嫁娶、安床、修造、入宅、求学",
"纳福、栽种、求医、交易、扫舍"
];
var JiList = [
"动土、破土、安葬、行丧、伐木",
"诉讼、远行、破土、嫁娶、开光",
"搬迁、动工、借贷、登高、临水"
];
// 生肖运势
var YunShi = [
"运势平稳，诸事顺遂，宜稳步前行",
"小有波折，谨慎行事，不宜冒进",
"吉星高照，财运亨通，事事称心",
"运势普通，守成为上，静待时机"
];
// 八卦卦象
var GuaXiang = [
"乾卦：天行健，君子自强不息",
"坤卦：地势坤，君子厚德载物",
"屯卦：万物初生，循序渐进为宜",
"蒙卦：启蒙修心，虚心求教",
"需卦：耐心等待，切勿急躁",
"讼卦：避讼止争，和气生财"
];
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){
isLeap ? isLeap=false : (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 weekArr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.getElementById("timeShowDate").innerText = `${year}年${month}月${day}日 ${weekArr[now.getDay()]}`;
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 baseIdx = (lunar.year + lunar.month + lunar.day) % 12;
const dayIdx = (lunar.day + lunar.month) % 12;
// 五行、星宿
const ganIdx = (lunar.year - 4) % 10;
const wuxing = WuXing[ganIdx];
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}`;
// 冲煞、胎神、值日星君
document.getElementById("lunarChongSha").innerText = `冲煞：${ChongSha[baseIdx]}`;
document.getElementById("lunarTaiShen").innerText = `胎神：${TaiShen[baseIdx]}`;
document.getElementById("lunarZhiXing").innerText = `值日星君：${ZhiXing[baseIdx]}`;
// 黄道黑道
document.getElementById("lunarHuangDao").innerText = `黄道黑道：${HuangDao[dayIdx]}`;
// 彭祖百忌
document.getElementById("lunarPengZu").innerText = `彭祖百忌：${PengZu[dayIdx]}`;
// 宜忌
const rndYiJi = (lunar.day + lunar.month) % 3;
document.getElementById("lunarYi").innerText = YiList[rndYiJi];
document.getElementById("lunarJi").innerText = JiList[rndYiJi];
// 全天吉时凶时
document.getElementById("lunarGoodTime").innerText = AllGoodTime[rndYiJi];
document.getElementById("lunarBadTime").innerText = AllBadTime[rndYiJi];
// 运势、卦象
const yunIdx = (lunar.day * 2) % 4;
const guaIdx = (lunar.month + lunar.day) % 6;
document.getElementById("lunarFortune").innerText =
`生肖运势：${YunShi[yunIdx]} | 今日卦象：${GuaXiang[guaIdx]}`;
}
document.getElementById("timeShowTip").innerText = getTimeTip(hourNum);
}
updateTimeShow();
setInterval(updateTimeShow, 1000);
</script>一、每秒实时变化（一直在动）
顶部时分秒：正常走时钟，每秒刷新
当前时辰 + 时辰吉凶：
每 2 小时切换一个时辰（子时→丑时→寅时……），到点自动更换对应时段和吉凶。
二、按「当天日期」变化（凌晨 0 点整体刷新）
只要日期一变，下面整套黄历内容全部自动换新：
农历日期、干支、生肖
五行、二十八星宿
冲煞、胎神方位
值日星君、黄道 / 黑道日
彭祖百忌
当日宜 / 忌
全天吉时、全天凶时
生肖运势、八卦卦象
三、总结
✅ 小时级变化：当前时辰、时辰吉凶（2 小时一换）✅ 秒级变化：钟表时间✅ 日期级变化：其余所有黄历民俗内容（跨日自动全更新）
整体是动态联动的，不用手动刷新、不用改代码，挂着页面就会自动随时间运转。
