Skip to content

Commit

Permalink
Create index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@liuhangcheng
liuhangcheng authored Aug 19, 2024
0 parents commit 5fbaab7
Showing 1 changed file with 241 additions and 0 deletions.
241 changes: 241 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>易经铜钱占卜</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
.result {
font-size: 18px;
margin: 10px 0;
}
.hexagram-row {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
}
.hexagram-column {
margin: 0 20px;
}
.hexagram {
font-size: 24px;
margin: 5px 0;
}
button {
padding: 10px 20px;
font-size: 16px;
margin-top: 20px;
cursor: pointer;
}
.coins {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.coin {
font-size: 40px;
margin: 0 10px;
}
.line {
font-size: 24px;
margin: 5px 0;
}
.description {
margin-top: 20px;
}
</style>
</head>
<body>

<h1>易经铜钱占卜</h1>
<p>点击按钮开始掷铜钱，生成卦象。</p>

<div class="coins">
<span id="coin1" class="coin">🟡</span>
<span id="coin2" class="coin">🟡</span>
<span id="coin3" class="coin">🟡</span>
</div>

<button id="tossButton" onclick="tossCoins()">掷铜钱</button>
<button id="resetButton" onclick="resetAll()" disabled>重置</button>

<div class="result">
<p id="lineResult"></p>
</div>

<div class="hexagram-row">
<div class="hexagram-column">
<h2>本卦</h2>
<div id="originalHexagram" class="hexagram"></div>
<p id="originalHexagramName"></p>
</div>
<div class="hexagram-column">
<h2>变卦</h2>
<div id="changedHexagram" class="hexagram"></div>
<p id="changedHexagramName"></p>
</div>
</div>

<div class="description">
<p id="originalHexagramDescription"></p>
<p id="changedHexagramDescription"></p>
</div>

<script>
const guaData = {
'111111': { name: '乾 (Qián)', description: '乾卦：元亨利贞。'},
'000000': { name: '坤 (Kūn)', description: '坤卦：元亨，利牝马之贞。'},
'100010': { name: '屯 (Zhūn)', description: '屯卦：元亨，利贞，勿用有攸往。'},
'010001': { name: '蒙 (Méng)', description: '蒙卦：亨。匪我求童蒙，童蒙求我。'},
'111010': { name: '需 (Xū)', description: '需卦：有孚，光亨，贞吉。'},
'010111': { name: '讼 (Sòng)', description: '讼卦：有孚窒惕，中吉。终凶。'},
'000010': { name: '师 (Shī)', description: '师卦：贞，丈人吉。'},
'010000': { name: '比 (Bǐ)', description: '比卦：吉。原筮，元永贞，无咎。不宁方来，后夫凶。'},
'110111': { name: '小畜 (Xiǎo Xù)', description: '小畜卦：亨。密云不雨，自我西郊。'},
'111011': { name: '履 (Lǚ)', description: '履卦：履虎尾，不咥人，亨。'},
'000111': { name: '泰 (Tài)', description: '泰卦：小往大来，吉，亨。'},
'111000': { name: '否 (Pǐ)', description: '否卦：否之匪人，不利君子贞，大往小来。'},
'111101': { name: '同人 (Tóng Rén)', description: '同人卦：同人于野，亨，利涉大川，利君子贞。'},
'101111': { name: '大有 (Dà Yǒu)', description: '大有卦：元亨。'},
'000100': { name: '谦 (Qiān)', description: '谦卦：亨。君子有终。'},
'001000': { name: '豫 (Yù)', description: '豫卦：利建侯行师。'},
'011001': { name: '随 (Suí)', description: '随卦：元亨，利贞，无咎。'},
'100110': { name: '蛊 (Gǔ)', description: '蛊卦：元亨，利涉大川。先甲三日，后甲三日。'},
'000011': { name: '临 (Lín)', description: '临卦：元亨，利贞。至于八月有凶。'},
'110000': { name: '观 (Guān)', description: '观卦：盥而不荐，有孚顒若。'},
'101001': { name: '噬嗑 (Shì Kè)', description: '噬嗑卦：亨，利用狱。'},
'100101': { name: '贲 (Bì)', description: '贲卦：亨。小利有攸往。'},
'100000': { name: '剥 (Bō)', description: '剥卦：不利有攸往。'},
'000001': { name: '复 (Fù)', description: '复卦：亨。出入无疾，朋来无咎。'},
'111001': { name: '无妄 (Wú Wàng)', description: '无妄卦：元，亨，利，贞。其匪正有眚，不利有攸往。'},
'100111': { name: '大畜 (Dà Xù)', description: '大畜卦：利贞。不家食吉，利涉大川。'},
'001111': { name: '颐 (Yí)', description: '颐卦：贞吉。观颐，自求口实。'},
'111100': { name: '大过 (Dà Guò)', description: '大过卦：栋桡，利有攸往，亨。'},
'000101': { name: '坎 (Kǎn)', description: '坎卦：习坎，有孚，维心亨，行有尚。'},
'101000': { name: '离 (Lí)', description: '离卦：利贞，亨。畜牝牛，吉。'},
'011010': { name: '咸 (Xián)', description: '咸卦：亨，利贞，取女吉。'},
'010110': { name: '恒 (Héng)', description: '恒卦：亨，无咎，利贞，利有攸往。'},
'000110': { name: '遁 (Dùn)', description: '遁卦：亨，小利贞。'},
'011000': { name: '大壮 (Dà Zhuàng)', description: '大壮卦：利贞。'},
'100011': { name: '晋 (Jìn)', description: '晋卦：康侯用锡马蕃庶，昼日三接。'},
'110100': { name: '明夷 (Míng Yí)', description: '明夷卦：利艰贞。'},
'001010': { name: '家人 (Jiā Rén)', description: '家人卦：利女贞。'},
'010100': { name: '睽 (Kuí)', description: '睽卦：小事吉。'},
'110001': { name: '蹇 (Jiǎn)', description: '蹇卦：利西南，不利东北。利见大人，贞吉。'},
'100110': { name: '解 (Xiè)', description: '解卦：利西南。无所往，其来复吉。有攸往，夙吉。'},
'010101': { name: '损 (Sǔn)', description: '损卦：有孚，元吉，无咎，可贞，利有攸往。'},
'101010': { name: '益 (Yì)', description: '益卦：利有攸往，利涉大川。'},
'110110': { name: '夬 (Guài)', description: '夬卦：扬于王庭，孚号，有厉，告自邑，不利即戎，利有攸往。'},
'001011': { name: '姤 (Gòu)', description: '姤卦：女壮，勿用取女。'},
'101101': { name: '萃 (Cuì)', description: '萃卦：亨。王假有庙，利见大人，亨，利贞。用大牲吉，利有攸往。'},
'110101': { name: '升 (Shēng)', description: '升卦：元亨，用见大人，勿恤，南征吉。'},
'101011': { name: '困 (Kùn)', description: '困卦：亨，贞大人吉，无咎，有言不信。'},
'011101': { name: '井 (Jǐng)', description: '井卦：改邑不改井，无丧无得。往来井井，汔至亦未繘井，羸其瓶，凶。'},
'111110': { name: '革 (Gé)', description: '革卦：己日乃孚，元亨，利贞，悔亡。'},
'011111': { name: '鼎 (Dǐng)', description: '鼎卦：元吉，亨。'},
'001001': { name: '震 (Zhèn)', description: '震卦：亨。震来虩虩，笑言哑哑。震惊百里，不丧匕鬯。'},
'011110': { name: '艮 (Gèn)', description: '艮卦：艮其背，不获其身，行其庭，不见其人，无咎。'},
'000011': { name: '渐 (Jiàn)', description: '渐卦：女归吉，利贞。'},
'110000': { name: '归妹 (Guī Mèi)', description: '归妹卦：征凶，无攸利。'},
'100001': { name: '丰 (Fēng)', description: '丰卦：亨，王假之，勿忧，宜日中。'},
'011100': { name: '旅 (Lǚ)', description: '旅卦：小亨，旅贞吉。'},
'100011': { name: '巽 (Xùn)', description: '巽卦：小亨，利有攸往，利见大人。'},
'110100': { name: '兑 (Duì)', description: '兑卦：亨，利贞。'},
'001110': { name: '涣 (Huàn)', description: '涣卦：亨。王假有庙，利涉大川，利贞。'},
'011001': { name: '节 (Jié)', description: '节卦：亨。苦节不可贞。'},
'101100': { name: '中孚 (Zhōng Fú)', description: '中孚卦：豚鱼，吉。利涉大川，利贞。'},
'001101': { name: '小过 (Xiǎo Guò)', description: '小过卦：亨，利贞。可小事，不可大事。飞鸟遗之音，不宜上，宜下，大吉。'},
'111101': { name: '既济 (Jì Jì)', description: '既济卦：亨小，利贞。初吉终乱。'},
'101111': { name: '未济 (Wèi Jì)', description: '未济卦：亨，小狐汔济，濡其尾，无攸利。'}
};

let lines = [];
let originalHexagram = [];
let changedHexagram = [];

function tossCoins() {
const coins = [getCoinResult(), getCoinResult(), getCoinResult()];
document.getElementById('coin1').innerText = coins[0] ? '🟡' : '⚪';
document.getElementById('coin2').innerText = coins[1] ? '🟡' : '⚪';
document.getElementById('coin3').innerText = coins[2] ? '🟡' : '⚪';

const line = calculateLine(coins);
lines.unshift(line.text);

// 保存本卦和变卦的结果
originalHexagram.unshift(line.originalSymbol);
changedHexagram.unshift(line.changedSymbol);

document.getElementById('lineResult').innerText = `本爻: ${line.text}`;

// 更新显示卦象
document.getElementById('originalHexagram').innerHTML = originalHexagram.join('<br>');
document.getElementById('changedHexagram').innerHTML = changedHexagram.join('<br>');

if (lines.length === 6) {
document.getElementById('tossButton').disabled = true;
document.getElementById('resetButton').disabled = false; // 启用重置按钮
displayHexagramNames();
}
}

function getCoinResult() {
return Math.random() < 0.5;
}

function calculateLine(coins) {
const sum = coins.reduce((a, b) => a + b, 0);
if (sum === 3) {
return {text: "O (老阳) -> 阴爻 (– –)", originalSymbol: '—', changedSymbol: '– –'};
} else if (sum === 0) {
return {text: "× (老阴) -> 阳爻 (—)", originalSymbol: '– –', changedSymbol: '—'};
} else if (sum === 2) {
return {text: "— (少阳)", originalSymbol: '—', changedSymbol: '—'};
} else {
return {text: "– – (少阴)", originalSymbol: '– –', changedSymbol: '– –'};
}
}

function displayHexagramNames() {
const originalBinary = originalHexagram.map(symbol => symbol === '—' ? '1' : '0').join('');
const changedBinary = changedHexagram.map(symbol => symbol === '—' ? '1' : '0').join('');

const originalData = guaData[originalBinary];
const changedData = guaData[changedBinary];

document.getElementById('originalHexagramName').innerText = `卦名: ${originalData.name}`;
document.getElementById('changedHexagramName').innerText = `变卦名: ${changedData.name}`;

document.getElementById('originalHexagramDescription').innerText = `卦辞: ${originalData.description}`;
document.getElementById('changedHexagramDescription').innerText = `变卦辞: ${changedData.description}`;
}

function resetAll() {
// 清空记录的卦象和变卦数据
lines = [];
originalHexagram = [];
changedHexagram = [];

// 清空显示内容
document.getElementById('originalHexagram').innerHTML = '';
document.getElementById('changedHexagram').innerHTML = '';
document.getElementById('originalHexagramName').innerText = '';
document.getElementById('changedHexagramName').innerText = '';
document.getElementById('originalHexagramDescription').innerText = '';
document.getElementById('changedHexagramDescription').innerText = '';
document.getElementById('lineResult').innerText = '';

// 重置按钮状态
document.getElementById('tossButton').disabled = false;
document.getElementById('resetButton').disabled = true;
}
</script>

</body>
</html>

0 comments on commit 5fbaab7

Please sign in to comment.