当前位置：首页 > news >正文

在bootstrap下实现万年历

news 2025/4/3 8:01:58

因为开一个易经学习平台，开发了一个万年历，界面如下：
效果可以看：易学
在这里插入图片描述

相关代码：

<!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()">&times;</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>