因为开一个易经学习平台，开发了一个万年历，界面如下：
效果可以看：易学
相关代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>万年历</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="static/css/css.css">
</head>
<body class="bg-light">
<div class="container mt-4 calender" style="position: relative;" id="container-c">
<div class="close-btn" onclick="closeCalendar()">
×
</div>
<div class="row align-items-stretch">
<div class="col-6 col-md-3 order-md-1 order-2">
<div class="card h-100">
<div class="card-body">
<div style="display: flex; flex-wrap: wrap;">
<div class="year" id="year" style="font-weight: bold;margin-left: 5px;">乙已年</div>
<div class="year" id="year_shu">属蛇</div>
<div class="year" id="year_tu">覆灯火</div>
</div>
<div style="display: flex; flex-wrap: wrap;">
<div class="year" id="month" style="font-weight: bold;margin-left: 5px;">己卯月</div>
<div class="year" id="month_shu">属兔</div>
<div class="year" id="month_tu">城头土</div>
</div>
<div style="display: flex; flex-wrap: wrap;">
<div class="year" id="day" style="font-weight: bold;margin-left: 5px;">丙申日</div>
<div class="year" id="day_shu">属猴</div>
<div class="year" id="day_tu">山下火</div>
</div>
<hr>
<div id="prevJieQi">节气春分：2025-03-20 星期四</div>
<hr>
<span class="badge-yi">宜</span>
<ul class="calendar-list" id="yj-yi">
<li>嫁娶</li>
<li>开光</li>
<li>祭祀</li>
</ul>
<hr>
<div>吉神宜趋</div>
<hr>
<ul class="jishen-list" id="jiShenYiqu">
<li>月德合</li>
<li>时阳</li>
<li>生气</li>
</ul>
<hr>
<div>彭祖：<span id="pengzu">丙不修灶必见灾殃</span></div>
<div>吕才：<span id="baiji">丙不修灶必见灾殃</span></div>
<hr>
<div>月名：<span id="yueming">仲春</span></div>
<div>月相：<span id="yuexiang">晦</span></div>
<div>物候：<span id="wuhou">春分</span></div>
</div>
</div>
</div>
<div class="col-12 col-md-6 order-md-2 order-1 mb-3 mb-md-0">
<div class="card h-100">
<div class="card-body center">
<div class="date-select">
<input type="text" value="2025" type="number" id="yearInput" /> 年
<select id="monthInput">
<option value="1">1</option>
</select> 月
<input type="text" value="28" type="number" id="dayInput" /> 日
</div>
<div class="date-display" id="solarDate">
公历2025年3月28日 星期五 白羊座
</div>
<div class="big-day">
<a href="javascript:void(0);" class="prev">◀</a>
<span id="date-day">28</span>
<a href="javascript:void(0);" class="next">▶</a>
</div>
<div class="lunar-date" id="lunarDate">
农历二〇二五年二月廿九
</div>
<div class="position-info">
<div class="position-block">
<div>财神位</div>
<div class="row-r"><span>喜神</span><span id="xishen"></span></div>
<div class="row-r"><span>福神</span><span id="fushen"></span></div>
<div class="row-r"><span>财神</span><span id="caishen"></span></div>
</div>
<div class="position-block">
<div>阳贵神</div>
<div class="row-r"><span>阳贵神</span><span id="yangGui"></span></div>
<div class="row-r"><span>阴贵神</span><span id="yinGui"></span></div>
</div>
</div>
<div class="position-info">
<div class="position-block">
<div>空亡所值</div>
<div class="row-r"><span>年</span><span id="yearKongWang"></span></div>
<div class="row-r"><span>月</span><span id="monthKongWang"></span></div>
<div class="row-r"><span>日</span><span id="dayKongWang"></span></div>
</div>
<div class="position-block">
<div>九宫飞星</div>
<div class="row-r"><span class="label">九星</span><span id="yearNineStar">五黄土玉衡</span></div>
<div class="row-r"><span class="label">二十八宿</span><span id="xiu28">西方娄金狗(吉)</span></div>
<div class="row-r"><span id="zhishui">七龙治水</span><span id="dejin">四日得金</span></div>
<div class="row-r"><span id="fenbing">九人分饼</span><span id="gengtian">四牛耕田</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-3 order-md-3 order-2">
<div class="card h-100">
<div class="card-body">
<div style="display: flex; flex-wrap: wrap;">
<div style="font-weight: bold;text-align: right;" class="year">乙已年</div>
<div style="text-align: right;" class="year" id="xiangchong">猴日冲(庚寅)虎</div>
</div>
<div style="display: flex; flex-wrap: wrap;">
<div class="year" style="font-weight: bold;margin-left: 5px;">值神</div>
<div class="year"></div>
<div class="year" id="zhishen">执</div>
</div>
<div style="display: flex; flex-wrap: wrap;">
<div class="year" style="font-weight: bold;margin-left: 5px;">十二神</div>
<div class="year"></div>
<div class="year" id="shen12">勾陈(黑道日)</div>
</div>
<hr>
<div id="nextJieQi">节气春分：2025-03-20 星期四</div>
<hr>
<span class="badge-ji">忌</span>
<ul class="calendar-list" id="yj-ji">
<li>嫁娶</li>
<li>开光</li>
<li>祭祀</li>
</ul>
<hr>
<div id="jishen">凶煞宜忌</div>
<hr>
<ul class="jishen-list" id="xiongshaYiji">
<li>月德合</li>
<li>时阳</li>
<li>生气</li>
</ul>
<hr>
<div>本月胎神：<span id="monthTaiShen">丙不修灶必见灾殃</span></div>
<div>今日胎神：<span id="dayTaiShen">申不安床鬼祟入房</span></div>
<hr>
<div>岁煞： <span id="suiSha"></span></div>
<div>六曜： <span id="liuYao"></span></div>
<div>日禄： <span id="dayLu"></span></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 替换脚本部分 -->
<script src="static/js/lunar.min.js"></script>
<script>
document.write('<script src="static/js/js.js?v=' + Math.random() + '"><\/script>');
</script>
<script>
// 添加显示日历的函数
window.showCalendar = function () {
document.getElementById('container-c').style.display = 'block';
// 显示后再初始化
setTimeout(() => {
if (typeof initApp === 'function') {
initApp();
}
}, 100);
}
// 添加关闭日历的函数
window.closeCalendar = function () {
document.getElementById('container-c').style.display = 'none';
}
// DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', function () {
function checkAndInit() {
if (typeof window.Lunar !== 'undefined') {
// 检查容器是否显示
const container = document.getElementById('container-c');
if (container && container.style.display !== 'none') {
if (typeof initApp === 'function') {
initApp();
}
}
} else {
setTimeout(checkAndInit, 100);
}
}
checkAndInit();
});
</script>
<!-- 引入JavaScript -->
<script>
$(document).ready(function() {
// 设置默认日期为今天
const today = new Date();
$('#year').val(today.getFullYear());
$('#month').val(today.getMonth() + 1);
$('#day').val(today.getDate());
// 今天按钮点击事件
$('#today').click(function() {
$('#year').val(today.getFullYear());
$('#month').val(today.getMonth() + 1);
$('#day').val(today.getDate());
// 触发查询
$('#searchDate').click();
});
// 查询按钮点击事件
$('#searchDate').click(function() {
// 这里添加日期查询逻辑
// 可以调用后端API获取万年历数据
});
});
</script>
</body>
</html>