<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>周易六爻占卜程序</title>
<style>
body {
font-family: '楷体', KaiTi, serif;
max-width: 800px;
margin: 20px auto;
background: #f5e6d3;
}
#guaContainer {
border: 3px double #8b4513;
padding: 20px;
background: #fffaf0;
}
.yao-line {
font-size: 2em;
margin: 10px 0;
color: #8b0000;
}
#result {
margin-top: 20px;
padding: 15px;
border-top: 2px dashed #8b4513;
}
button {
padding: 10px 25px;
background: #8b4513;
color: white;
border: none;
cursor: pointer;
margin: 5px;
}
.changed { /* 变爻样式 */
color: #00008b;
font-weight: bold;
}
svg {
width: 100%;
height: auto;
margin-top: 20px;
}
#history {
margin-top: 20px;
padding: 15px;
border-top: 2px dashed #8b4513;
}
</style>
</head>
<body>
<div id="guaContainer">
<h2>周易六爻占卜</h2>
<div id="yaoDisplay"></div>
<button onclick="generateYao()" id="shakeBtn">摇卦</button>
<div id="result"></div>
<svg id="guaGraph"></svg>
</div>
<div id="history">
<h3>卦象历史记录</h3>
<ul id="historyList"></ul>
</div>
<script>
let currentStep = 0;
const guaResult = [];
const historyList = document.getElementById("historyList");
const guaDictionary = {
"111111": { name: "乾为天", desc: "天行健，君子以自强不息", yaoJudgments: ["初九:潜龙勿用...", "九二:见龙在田...", "九三:君子终日乾乾...", "九四:或跃在渊...", "九五:飞龙在天...", "上九:亢龙有悔..."] },
"000000": { name: "坤为地", desc: "地势坤，君子以厚德载物", yaoJudgments: ["初六:履霜坚冰...", "六二:直方大...", "六三:含章可贞...", "六四:括囊无咎...", "六五:黄裳元吉...", "上六:龙战于野..."] },
"001011": { name: "屯为水雷", desc: "亨。刚柔始交而难生，动乎险中，大亨贞。雷雨之动满盈，天造草昧，宜建侯而不宁", yaoJudgments: ["初九:磐桓..., 六二:乘马班如...", "九三:即鹿无虞...", "六四:_multiplying_wood...", "六五:屯其膏...", "上六:乘马班如..."] },
"110100": { name: "蒙为山水", desc: "亨。匪我求童蒙，童蒙求我。初筮告；再三渎，渎则不告。利贞", yaoJudgments: ["初六:发蒙佑...", "九二:包蒙吉...", "六三:勿用取女...", "六四:困蒙吝...", "六五:童蒙吉...", "上九:击蒙不利..." ]},
"010010": { name: "需为水天", desc: "有孚光亨，利涉大川。渎则濡其尾，吝", yaoJudgments: ["初九:需于郊...", "九二:需于沙...", "九三:需于泥...", "六四:需于血...", "九五:需于酒食...", "上六:入于穴..."] },
"101101": { name: "讼为天地", desc: "有孚窒惕，中吉。终凶。利见大人，不利涉大川", yaoJudgments: ["初六:不永所事...", "九二:不克讼...", "六三:食旧德...", "六四:不克讼...", "九五:讼于邑...", "上九:或锡眚..."] },
"011010": { name: "师为地水", desc: "贞丈人吉，无咎", yaoJudgments: ["初六:师出以律...", "九二:在师中...", "六三:师或舆尸...", "六四:左次无咎...", "六五:田有禽...", "上六:大君有命..."] },
"100101": { name: "比为风地", desc: "吉。原筮，元永贞，无咎。不宁方来，后夫凶", yaoJudgments: ["初六:有孚不信...", "九二:比之自内...", "六三:比之匪人...", "六四:外比之...", "九五:显比吉...", "上六:比之无首..."] },
"110010": { name: "小畜为风天", desc: "亨。密云不雨，自我西郊。敬慎施教，不宜空受其咎", yaoJudgments: ["初九:复自道...", "九二:牵复吉...", "九三:夫妻反目...", "六四:有孚血去...", "九五:有孚挛如...", "上九:既雨既处..."] },
"011010": { name: "履为天泽", desc: "履虎尾，不咥人亨。分庭抗礼，不失其所。否臧，吉利。日贞凶", yaoJudgments: ["初九:素履往...", "九二:履道坦然...", "六三:眇能视...", "六四:履虎尾...", "九五:夬履贞厉...", "上九:视履考祥..."] },
"110110": { name: "泰为风水", desc: "亨。小往大来，吉。财成多品物", yaoJudgments: ["初九:拔茅茹宿...", "九二:包荒得尚...", "九三:无平不陂...", "六四:翩翩不富...", "六五:帝乙归妹...", "上六:城复于隍..."] },
"011001": { name: "否为地雷", desc: "否之匪人，不利君子贞。大往小来", yaoJudgments: ["初六:拔茅不得须...", "六二:休否休否...", "六三:包羞...", "九四:有命无咎...", "九五:休否休否...", "上九:倾否先否..."] },
"100110": { name: "同人为风火", desc: "亨。类族辨物，吉。利涉大川", yaoJudgments: ["初九:出门同人...", "九二:同人于门...", "九三:伏戎于莽...", "九四:乘墉除恶...", "九五:大师克相遇...", "上九:同人于郊..."] },
"011100": { name: "大有为离地", desc: "元亨。", yaoJudgments: ["初九:无交害...", "九二:大车以载...", "九三:公用亨于天...", "九四:匪其彭无咎...", "九五:厥孚交如...", "上九:自天祐之..."] },
"101011": { name: "谦为雷地", desc: "亨。君子有终", yaoJudgments: ["初六:谦谦君子...", "六二:鸣谦亨...", "九三:劳谦君子...", "六四:无不利遵王道...", "六五:利用侵伐...", "上六:鸣谦利用回向..."] },
"000111": { name: "豫为震地", desc: "利建侯行师", yaoJudgments: ["初六:鸣豫凶...", "六二:介于石壕...", "六三:盱豫悔...", "六四:由豫大有得...", "六五:贞疾恒不死...", "上六:冥豫成有渝..."] },
"111000": { name: "随为泽水", desc: "元亨利贞，无咎", yaoJudgments: ["初九:官有渝不变志也...", "六二:系小子失丈夫...", "六三:系丈夫失小子...", "六四:有孚在道...", "九五:孚于嘉吉...", "上六:拘系之..."] },
"100011": { name: "蛊为山风", desc: "先甲三日，后甲三日", yaoJudgments: ["初六:干父之蛊...", "九二:干母之蛊...", "九三:干父之蛊小有悔...", "六四:裕父之蛊...", "六五:干父之蛊贞乱...", "上九:不事王侯..."] },
"011110": { name: "临为泽地", desc: "元亨。利于庶民", yaoJudgments: ["初九:咸临贞吉...", "九二:咸临吉无不利...", "六三:甘临之位...", "六四:至临吉...", "六五:知临大君之宜...", "上六:敦临吉..."] },
"111010": { name: "观为风地", desc: "盥而不荐，有孚颙若。中正，观瞻利有攸往", yaoJudgments: ["初六:童观小人无咎...", "九二:窥观亦有喜...", "六三:观我生进退...", "六四:观国之光...", "九五:观我生君子无咎...", "上九:观其生与否..."] },
"010101": { name: "噬嗑为雷山", desc: "亨。利用狱。明罚敕法", yaoJudgments: ["初九:屦校灭趾...", "六二:噬肤灭鼻...", "六三:噬腊肉遇毒...", "六四:噬干胏得金矢...", "六五:噬干肉饮酒...", "上九:何校灭耳..."] },
"101110": { name: "贲为山火", desc: "亨。小利有攸往", yaoJudgments: ["初九:贲其趾亨...", "六二:贲其须...", "九三:贲如濡如...", "六四:贲如皤如...", "六五:贲于丘园...", "上九:白贲无咎..."] },
"001111": { name: "剥为兑风", desc: "不利有攸往", yaoJudgments: ["初六:剥床以足...", "六二:剥床以辨...", "六三:剥之无咎...", "六四:剥床以肤...", "六五:贯鱼...", "上六:硕果不食..."] },
"111100": { name: "复为地雷", desc: "亨。出入无疾。朋来无咎。反复其道七日", yaoJudgments: ["初九:不远复无祗悔...", "六二:休复吉...", "六三:频复厉...", "六四:中行独复...", "六五:敦复无悔...", "上六:迷复凶..."] },
"010110": { name: "无妄为风水", desc: "利贞。不利有攸往", yaoJudgments: ["初九:无妄往吉...", "六二:不耕获...", "六三:无妄之灾...", "六四:可贞无咎...", "九五:无妄之药...", "上九:无妄行有眚..."] },
"101001": { name: "大畜为山雷", desc: "利贞", yaoJudgments: ["初九:有厉利已...", "九二:舆说辐...", "九三:良马逐服...", "六四:童牛之牿...", "六五:豮豕之牙...", "上九:何天之衢..."] },
"000101": { name: "颐为山泽", desc: "贞吉。观颐，自求口实", yaoJudgments: ["初九:舍尔灵龟...", "六二:颠颐吉...", "六三:拂颐贞凶...", "六四:颠颐吉...", "六五:拂经之颐...", "上九:由颐厉吉..."] },
"110000": { name: "大过为泽风", desc: "栋桡。利有攸往。亨", yaoJudgments: ["初六:藉用白茅...", "九二:枯杨呼风...", "九三:栋挠凶...", "九四:栋隆吉...", "九五:枯杨生华...", "上六:枯杨栖老..."] },
"011000": { name: "坎为水地", desc: "习坎。有孚维心亨。行有不得，反求诸己", yaoJudgments: ["初六:习坎入于坎...", "九二:莫夜作艰...", "六三:来之坎坎...", "六四:樽酒簋贰...", "九五:坎不盈...", "上六:系用徽𬙊..."] },
"000100": { name: "离为火焰", desc: "利贞，亨通。大人利用亨于器皿", yaoJudgments: ["初九:履错然...", "六二:黄离元吉...", "九三:日昃之离...", "九四:突如其来如...", "六五:出涕沱若...", "上九:王用出征..."] },
"001101": { name: "咸为泽山", desc: "亨利贞，取女吉", yaoJudgments: ["初六:咸其拇...", "六二:咸其腓...", "九三:咸其股...", "六四:贞吉悔亡...", "九五:咸其脢...", "上六:咸其辅..."] },
"010111": { name: "恒为雷风", desc: "亨。无咎，利贞", yaoJudgments: ["初六:浚恒贞凶...", "九二:悔亡...", "九三:不恒其德...", "九四:田无禽...", "六五:恒其德贞吉...", "上六:振恒凶..."] },
"101100": { name: "遁为山天", desc: "亨。小利贞", yaoJudgments: ["初六:遁 tail in field...", "六二:执之用黄牛之革...", "九三:系遁危...", "九四:好遁君子吉...", "九五:嘉遁贞吉...", "上九:肥遁无不利..."] },
"111001": { name: "大壮为雷风", desc: "贞。利贞", yaoJudgments: ["初九:壮于趾...", "九二:贞吉...", "九三:小人用壮...", "九四:贞吉悔亡...", "九五:丧羊于易...", "上六:羝羊触藩..."] },
"110011": { name: "晋为火地", desc: "康侯用锡马蕃庶。昼日三接", yaoJudgments: ["初六:晋如摧如...", "六二:晋如愁如...", "六三:众允悔亡...", "六四:贞吉悔亡...", "六五:悔亡...", "上六:/miscellaneous/..."] },
"011011": { name: "明夷为地火", desc: "利艰贞", yaoJudgments: ["初六:不明晦...", "六二:明夷...", "九三:于南狩...", "六四:入于左腹...", "六五:箕子之明夷...", "上六:不明晦..."] },
"100111": { name: "家人为主内", desc: "利女贞", yaoJudgments: ["初九:闲有家...", "六二:无攸遂，在中馈...", "九三:家人嗃嗃...", "六四:富家大吉...", "九五:王假有庙...", "上九:有孚威如..."] },
"011111": { name: "睽为火天", desc: "小事吉", yaoJudgments: ["初九:悔亡丧马...", "六二:遇主于巷...", "六三:见舆曳...", "六四:睽孤违宗...", "六五:厥宗噬肤...", "上九:睽孤见豕负涂..."] },
"111110": { name: "蹇为山地", desc: "蹇。利西南，不利东北。利见大人", yaoJudgments: ["初六:往蹇来誉...", "六二:王臣蹇蹇...", "九三:往蹇来反...", "六四:往蹇来连...", "九五:大蹇朋来...", "上六:往蹇来脱..."] },
"010100": { name: "解为雷水", desc: "利西南。无所往，其来复吉", yaoJudgments: ["初六:无咎...", "九二:田获三狐...", "九三:负且乘...", "六四:解而拇...", "六五:君子维有解...", "上六:公用射隼..."] },
"101000": { name: "损为风雷", desc: "有孚，元吉，无咎，可贞。利有攸往。曷之用？二簋可用享", yaoJudgments: ["初九:巳事遄往...", "六二:损下益上...", "九三:三人行必有我师...", "六四:损其疾...", "六五:或益之十朋...", "上九:弗损益之..."] },
"000010": { name: "益为风雷", desc: "利有攸往，利涉大川", yaoJudgments: ["初九:利用为大作...", "六二:或益之十朋...", "六三:益之用凶事...", "六四:中行告公从...", "九五:有孚惠心...", "上九:莫益之..."] },
"100001": { name: "夬为泽地", desc: "扬于王庭，不利有攸往", yaoJudgments: ["初九:决履...", "九二:惕号莫夜...", "九三:壮于頣有凶...", "九四:臀无肤...", "九五:苋陆夬夬...", "上六:无号之忧..."] },
"010000": { name: "姤为地风", desc: "女壮，勿用取女", yaoJudgments: ["初六:系于金柅...", "九二:包有鱼...", "九三:臀无肤...", "九四:姤其角...", "九五:以杞包瓜...", "上九:姤其角不可以有容..."] },
"001000": { name: "萃为兑风", desc: "亨。聚少成多。顺天命也", yaoJudgments: ["初六:有孚不终...", "六二:引吉无咎...", "六三:萃如一人有孚...", "六四:大吉无咎...", "九五:萃有位只吉...", "上六:赍咨涕洟..."] },
"110111": { name: "升为地中", desc: "元亨。用见大人，勿恤，南征吉", yaoJudgments: ["初六:允升大吉...", "九二:孚乃利用禴...", "九三:升虚邑...", "六四:王用亨于岐山...", "六五:贞吉升阶...", "上六:冥升利于不息..."] },
"100111": { name: "困为泽水", desc: "亨。贞大人吉，无咎", yaoJudgments: ["初六:臀困于丛薄...", "九二:困于酒食...", "六三:据于蒺藜...", "六四:来徐徐...", "九五:劓刖，困于赤绂...", "上六:困于葛藟..."] },
"011101": { name: "井为水土", desc: "改邑不改井。无丧无得，往来井井。汔至亦未繘井邑并。羸其瓶，凶", yaoJudgments: ["初六:井泥不食...", "九二:井谷射鲋...", "九三:井渫不食...", "六四:井甃无咎...", "九五:寒泉浸春...", "上六:井收勿幕..."] },
"101110": { name: "革为离地", desc: "巳日乃孚。元亨。利贞。悔亡", yaoJudgments: ["初九:巩用黄牛之革...", "六二:巳日乃革之...", "九三:雉膏瀚满...", "九四:悔亡...","九五:大人虎变文炳...", "上六:君子豹变..."] },
"001100": { name: "鼎为木火", desc: "元吉，亨。利贞", yaoJudgments: ["初六:鼎颠趾...", "九二:鼎有实...", "九三:鼎耳革...", "九四:鼎折足...", "六五:鼎黄耳...", "上九:鼎玉铉..."] },
"110001": { name: "震为雷地", desc: "亨。震来虩虩，笑言哑哑。震惊百里，不丧匕鬯", yaoJudgments: ["初九:震来虩虩...", "六二:震来厉...", "六三:震苏苏...", "九四:震遂泥...", "六五:震往来应...", "上六:震索索..."] },
"010011": { name: "艮为止山", desc: "艮其背，不获其身；行其庭，不见其人。无咎", yaoJudgments: ["初六:艮其趾...", "六二:艮其腓...", "九三:艮其限...", "六四:艮其身...", "六五:艮其辅...", "上九:敦艮吉..."] },
"101010": { name: "渐为山泽", desc: "女归吉，利贞", yaoJudgments: ["初六:鸿渐于干...", "六二:鸿渐于磐...", "九三:鸿渐于陆...", "六四:鸿渐于木...", "九五:鸿渐于陵...", "上九:鸿渐于逵..."] },
"000100": { name: "归妹为泽风", desc: "征凶，无攸利", yaoJudgments: ["初九:归妹以娣...", "六二:待归妹...", "九三:归妹以须...", "九四:归妹愆期...", "六五:帝乙归妹...", "上六:归妹以微..."] },
"111010": { name: "丰为雷电", desc: "亨。王假之。勿忧，宜日中", yaoJudgments: ["初九:丰其沛...", "六二:丰其蔀...", "九三:丰其沛...", "九四:丰其蔀...", "九五:丰其沛...", "上六:丰其屋..."] },
"100100": { name: "旅为地天", desc: "小亨。旅贞吉", yaoJudgments: ["初六:旅琐琐...", "六二:旅即次...", "九三:旅焚其次...", "九四:旅于处...", "九五:旅于亭...", "上九:鸟焚其巢..."] },
"011100": { name: "巽为风地", desc: "小亨。利有攸往", yaoJudgments: ["初六:进退...", "九二:巽在床下...", "九三:频巽...", "六四:悔亡...", "九五:贞吉悔亡...", "上九:巽在床下..."] },
"110010": { name: "兑为泽金", desc: "亨。利贞", yaoJudgments: ["初九:和兑吉...", "六二:孚兑吉...", "九三:来兑凶...", "九四:商兑未宁...", "九五:孚于剥...", "上六:引兑..."] },
"001001": { name: "涣为风水", desc: "亨。王假有庙。利涉大川", yaoJudgments: ["初六:用拯马壮...", "九二:涣奔其机...", "六三:涣其躬...", "六四:涣其群...", "九五:涣汗其大号...", "上九:涣其血去逖出..."] },
"100101": { name: "节为泽雷", desc: "亨。苦节不可贞", yaoJudgments: ["初九:不出户庭...", "九二:不出门庭...", "六三:不节若，则嗟若...", "六四:安节亨...", "九五:甘节吉...", "上六:苦节贞凶..."] },
"011010": { name: "中孚为泽风", desc: "豚鱼吉，利涉大川，利贞", yaoJudgments: ["初九:中有它疑...", "九二:鸣鹤在阴...", "六三:得敌或鼓...", "六四:月几望...", "九五:有孚孪如...", "上九:翰音登于天..."] },
"101111": { name: "小过为雷山", desc: "可小事，不可大事。飞鸟遗之音，不宜上宾。 hon. 初六:飞鸟遗之音...", yaoJudgments: ["初六:飞鸟遗之音...", "六二:过此以往...", "九三:弗过防之...", "六四:无咎...", "九五:密云不雨...", "上六:弗遇雨件..."] },
"000011": { name: "既济为水火", desc: "亨小，利贞，初吉，终吉", yaoJudgments: ["初九:曳其轮...", "六二:妇丧其茀...", "九三:高宗伐鬼方...", "六四:繻有衣袽...", "九五:东邻杀牛不如西邻之禴祭...", "上六:濡其首，厉..."] },
"111101": { name: "未济为火水", desc: "亨。小狐汔济，濡其尾", yaoJudgments: ["初六:濡其尾...", "九二:曳其轮...", "九三:未济征凶...", "六四:贞吉悔亡...", "九五:贞吉悔亡...", "上九:有孚于饮酒..."] }
};
function generateYao() {
if (currentStep >= 6) return;
// 传统三枚硬币算法模拟
let coinSum = 0;
for(let i=0; i<3; i++){
coinSum += Math.random() < 0.5 ? 1 : 0; // 0为背面，1为正面
}
let yaoType;
switch(coinSum) { // 0=少阴,1=少阳,2=老阴,3=老阳
case 0: yaoType = { symbol: "--", value: 0, changed: false }; break;
case 1: yaoType = { symbol: "--", value: 0, changed: false }; break;
case 2: yaoType = { symbol: "—", value: 1, changed: false }; break;
case 3: yaoType = { symbol: "—", value: 1, changed: true }; break;
}
guaResult.unshift(yaoType); // 按顺序存储（从初爻到上爻）
const yaoDisplay = document.getElementById("yaoDisplay");
const newYao = document.createElement("div");
newYao.className = `yao-line${yaoType.changed ? ' changed' : ''}`;
newYao.textContent = `${currentStep + 1}爻：${yaoType.symbol}${yaoType.changed ? '（变爻）' : ''}`;
yaoDisplay.insertBefore(newYao, yaoDisplay.firstChild);
currentStep++;
if(currentStep === 6) {
showFinalResult();
document.getElementById("shakeBtn").disabled = true;
}
}
function showFinalResult() {
const guaKey = guaResult.map(y => y.value).join('');
const currentGua = guaDictionary[guaKey] || { name: "未知卦象", desc: "请补充卦象数据库" };
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = `
<h3>本卦：${currentGua.name}</h3>
<p>卦辞：${currentGua.desc}</p>
<h4>卦象解读：</h4>
<p>${generateInterpretation(guaResult)}</p>
`;
drawGuaGraph(guaResult);
recordHistory(currentGua);
}
function generateInterpretation(yaoList) {
const changedYao = yaoList.filter(y => y.changed).map((y, index) => ({ position: index + 1, type: y.value }));
const interpretationParts = [];
if (changedYao.length === 0) {
interpretationParts.push("静卦无变，依本卦卦辞解之");
} else {
interpretationParts.push(`动爻数：${changedYao.length}`);
changedYao.forEach(changed => {
interpretationParts.push(`第${changed.position}爻变化为${changed.type === 1 ? "阳" : "阴"}`);
});
}
return interpretationParts.join("<br>");
}
function drawGuaGraph(yaoList) {
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.getElementById("guaGraph");
svg.innerHTML = ""; // Clear previous drawing
const width = 400;
const height = 200;
const lineHeight = 30;
const startX = 100;
const startY = 30;
for (let i = 0; i < 6; i++) {
const line = document.createElementNS(svgNS, "line");
line.setAttribute("x1", startX);
line.setAttribute("y1", startY + i * lineHeight);
line.setAttribute("x2", startX + 200);
line.setAttribute("y2", startY + i * lineHeight);
line.setAttribute("stroke", "#8b0000");
line.setAttribute("stroke-width", "2");
if (yaoList[i].symbol === "—") {
const middleLine = document.createElementNS(svgNS, "line");
middleLine.setAttribute("x1", startX + 50);
middleLine.setAttribute("y1", startY + i * lineHeight);
middleLine.setAttribute("x2", startX + 150);
middleLine.setAttribute("y2", startY + i * lineHeight);
middleLine.setAttribute("stroke", "#8b0000");
middleLine.setAttribute("stroke-width", "2");
svg.appendChild(middleLine);
}
if (yaoList[i].changed) {
const changeMark = document.createElementNS(svgNS, "circle");
changeMark.setAttribute("cx", startX + 210);
changeMark.setAttribute("cy", startY + i * lineHeight);
changeMark.setAttribute("r", 5);
changeMark.setAttribute("fill", "#00008b");
svg.appendChild(changeMark);
}
svg.appendChild(line);
}
}
function recordHistory(gua) {
const listItem = document.createElement("li");
listItem.textContent = `本卦: ${gua.name}, 卦辞: ${gua.desc}`;
historyList.appendChild(listItem);
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
