157 lines
7.1 KiB
HTML
157 lines
7.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>皇极经世卦象计算系统</title>
|
||
|
|
<link rel="stylesheet" href="/static/style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>皇极经世卦象计算</h1>
|
||
|
|
<div class="input-group">
|
||
|
|
<label for="date-input">请输入日期：</label>
|
||
|
|
<input type="date" id="date-input" required>
|
||
|
|
<label for="time-input">时间：</label>
|
||
|
|
<input type="time" id="time-input" step="1" value="00:00:00">
|
||
|
|
|
||
|
|
<button id="calculate-btn">计算卦象</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="result-container" class="hidden">
|
||
|
|
<h2>计算结果</h2>
|
||
|
|
<div class="result-grid">
|
||
|
|
<div class="result-item">
|
||
|
|
<span class="label">计算日期：</span>
|
||
|
|
<span id="result-date" class="value"></span>
|
||
|
|
</div>
|
||
|
|
<div class="result-item">
|
||
|
|
<span class="label">年卦：</span>
|
||
|
|
<span id="year-gua" class="value"></span>
|
||
|
|
</div>
|
||
|
|
<div class="result-item">
|
||
|
|
<span class="label">月卦：</span>
|
||
|
|
<span id="month-gua" class="value"></span>
|
||
|
|
</div>
|
||
|
|
<div class="result-item">
|
||
|
|
<span class="label">日卦：</span>
|
||
|
|
<span id="day-gua" class="value"></span>
|
||
|
|
</div>
|
||
|
|
<div class="result-item">
|
||
|
|
<span class="label">时卦：</span>
|
||
|
|
<span id="hour-gua" class="value"></span>
|
||
|
|
</div>
|
||
|
|
<div class="result-item">
|
||
|
|
<span class="label">吉凶卦：</span>
|
||
|
|
<span id="luck-gua" class="value"></span>
|
||
|
|
</div>
|
||
|
|
<div class="result-item">
|
||
|
|
<span class="label">前后十年吉凶：</span>
|
||
|
|
<div id="luck-years" class="value"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="error-message" class="error hidden"></div>
|
||
|
|
|
||
|
|
<div id="loading" class="loading hidden">
|
||
|
|
<div class="spinner"></div>
|
||
|
|
<p>计算中，请稍候...</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.getElementById('calculate-btn').addEventListener('click', async () => {
|
||
|
|
const dateInput = document.getElementById('date-input');
|
||
|
|
const resultContainer = document.getElementById('result-container');
|
||
|
|
const errorMessage = document.getElementById('error-message');
|
||
|
|
const loading = document.getElementById('loading');
|
||
|
|
|
||
|
|
const timeInput = document.getElementById('time-input');
|
||
|
|
// 验证输入
|
||
|
|
if (!dateInput.value) {
|
||
|
|
showError('请选择日期');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 显示加载状态
|
||
|
|
loading.classList.remove('hidden');
|
||
|
|
resultContainer.classList.add('hidden');
|
||
|
|
errorMessage.classList.add('hidden');
|
||
|
|
|
||
|
|
|
||
|
|
// 组合日期和时间
|
||
|
|
const dateStr = dateInput.value;
|
||
|
|
const timeStr = timeInput.value + (timeInput.value.length === 5 ? ':00' : ''); // 补全秒数
|
||
|
|
try {
|
||
|
|
const response = await fetch('/calculate', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||
|
|
},
|
||
|
|
body: `date=${dateStr}&time=${timeStr}`
|
||
|
|
});
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
// 解析并显示结果
|
||
|
|
const result = data.result;
|
||
|
|
|
||
|
|
// 计算日期
|
||
|
|
document.getElementById('result-date').textContent = result.date;
|
||
|
|
// 通用格式化函数
|
||
|
|
const formatGuaDisplay = (gua) => {
|
||
|
|
return `
|
||
|
|
卦名：${gua.trigram}
|
||
|
|
爻值：${gua.yao1}${gua.yao2}${gua.yao3}${gua.yao4}${gua.yao5}${gua.yao6}
|
||
|
|
二进制：${gua.value_2binary}
|
||
|
|
`;
|
||
|
|
};
|
||
|
|
// 更新各卦象显示
|
||
|
|
document.getElementById('year-gua').innerHTML = `<pre>${formatGuaDisplay(result.year_gua)}</pre>`;
|
||
|
|
document.getElementById('month-gua').innerHTML = `<pre>${formatGuaDisplay(result.month_gua)}</pre>`;
|
||
|
|
document.getElementById('day-gua').innerHTML = `<pre>${formatGuaDisplay(result.day_gua)}</pre>`;
|
||
|
|
document.getElementById('hour-gua').innerHTML = `<pre>${formatGuaDisplay(result.hour_gua)}</pre>`;
|
||
|
|
document.getElementById('luck-gua').innerHTML = `<pre>${formatGuaDisplay(result.luck_gua)}</pre>`;
|
||
|
|
// document.getElementById('result-date').textContent = result.date;
|
||
|
|
// document.getElementById('day-gua').textContent = result.day_gua.trigram;
|
||
|
|
//const dayGua = result.day_gua;
|
||
|
|
//document.getElementById('day-gua').innerHTML = `
|
||
|
|
//<pre>
|
||
|
|
//卦名：${dayGua.trigram}
|
||
|
|
//爻值：${dayGua.yao1}${dayGua.yao2}${dayGua.yao3}${dayGua.yao4}${dayGua.yao5}${dayGua.yao6}
|
||
|
|
//</pre>
|
||
|
|
// `;
|
||
|
|
// 显示年份吉凶结果
|
||
|
|
if (result.luck_years && result.luck_years.length > 0) {
|
||
|
|
const luckYearsHTML = result.luck_years.map(year => `
|
||
|
|
<div class="year-luck-item">
|
||
|
|
<strong>${year.year}年：</strong>
|
||
|
|
卦名：${year.trigram}<br>
|
||
|
|
爻值：${year.yaoAll}
|
||
|
|
</div>
|
||
|
|
`).join('');
|
||
|
|
document.getElementById('luck-years').innerHTML = luckYearsHTML;
|
||
|
|
} else {
|
||
|
|
document.getElementById('luck-years').textContent = '无年份吉凶数据';
|
||
|
|
}
|
||
|
|
resultContainer.classList.remove('hidden');
|
||
|
|
} else {
|
||
|
|
showError(data.error || '计算失败');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
showError('网络请求失败: ' + error.message);
|
||
|
|
} finally {
|
||
|
|
loading.classList.add('hidden');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function showError(message) {
|
||
|
|
const errorElement = document.getElementById('error-message');
|
||
|
|
errorElement.textContent = message;
|
||
|
|
errorElement.classList.remove('hidden');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|