Skip to content

Commit 1aa6b2f

Browse files
WangSimiao2000WangSimiao2000
committed
Refactor Bazi Fortune Tool: Convert HTML structure to a Jekyll layout, enhance styling with embedded CSS, and remove external stylesheet. Update form elements and result display for improved user experience.
Signed-off-by: wangsimiao1 <wangsimiao1@xiaomi.com>
1 parent e27660d commit 1aa6b2f

3 files changed

Lines changed: 380 additions & 669 deletions

File tree

‎tools/bazi-fortune/bazi.js‎

Lines changed: 90 additions & 178 deletions
Original file line numberDiff line numberDiff line change
@@ -26,28 +26,26 @@ function getLunarYearDays(year) {
2626
function solarToLunar(year, month, day) {
2727
const baseYear = 1900;
2828
const baseDay = 31;
29-
30-
// 计算距离1900年1月31日的天数
29+
3130
let offset = 0;
3231
for (let i = baseYear; i < year; i++) {
3332
const yearDays = (i % 4 === 0 && i % 100 !== 0) || (i % 400 === 0) ? 366 : 365;
3433
offset += yearDays;
3534
}
36-
35+
3736
const monthDays = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
3837
if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
3938
monthDays[2] = 29;
4039
}
41-
40+
4241
for (let i = 1; i < month; i++) {
4342
offset += monthDays[i];
4443
}
4544
offset += day - baseDay;
46-
47-
// 计算农历日期
45+
4846
let lunarYear = baseYear;
4947
let lunarDay = 1;
50-
48+
5149
while (offset > 0) {
5250
const yearDays = getLunarYearDays(lunarYear);
5351
if (offset >= yearDays) {
@@ -57,210 +55,124 @@ function solarToLunar(year, month, day) {
5755
break;
5856
}
5957
}
60-
58+
6159
const leapMonth = getLeapMonth(lunarYear);
6260
let isLeap = false;
63-
61+
6462
for (let i = 1; i <= 12; i++) {
65-
let monthDays = getLunarMonthDays(lunarYear, i);
66-
67-
if (offset >= monthDays) {
68-
offset -= monthDays;
63+
let mDays = getLunarMonthDays(lunarYear, i);
64+
65+
if (offset >= mDays) {
66+
offset -= mDays;
6967
} else {
7068
lunarDay = offset + 1;
7169
break;
7270
}
73-
74-
// 处理闰月
71+
7572
if (i === leapMonth && !isLeap) {
7673
i--;
7774
isLeap = true;
78-
monthDays = getLeapDays(lunarYear);
75+
mDays = getLeapDays(lunarYear);
7976
}
8077
}
81-
78+
8279
return { year: lunarYear, day: lunarDay };
8380
}
8481

85-
// 节气计算（精确版）
82+
// 节气计算
8683
function getSolarMonth(year, month, day, hour) {
87-
// 节气大致日期和时刻（简化但相对准确）
88-
// 格式：[日期, 大致小时]
8984
const solarTerms = {
90-
1: [6, 0], // 小寒
91-
2: [4, 6], // 立春
92-
3: [6, 0], // 惊蛰
93-
4: [5, 6], // 清明
94-
5: [6, 0], // 立夏
95-
6: [6, 6], // 芒种
96-
7: [7, 12], // 小暑
97-
8: [8, 6], // 立秋
98-
9: [8, 6], // 白露
99-
10: [8, 12], // 寒露
100-
11: [7, 18], // 立冬
101-
12: [7, 12] // 大雪
85+
1: [6, 0], 2: [4, 6], 3: [6, 0], 4: [5, 6], 5: [6, 0], 6: [6, 6],
86+
7: [7, 12], 8: [8, 6], 9: [8, 6], 10: [8, 12], 11: [7, 18], 12: [7, 12]
10287
};
103-
88+
10489
const [termDay, termHour] = solarTerms[month] || [7, 12];
105-
106-
// 判断是否已过节气
10790
const isPassed = (day > termDay) || (day === termDay && hour >= termHour);
108-
109-
// 返回对应的节气月
110-
if (month === 1) return isPassed ? 12 : 11;
111-
if (month === 2) return isPassed ? 1 : 12;
112-
if (month === 3) return isPassed ? 2 : 1;
113-
if (month === 4) return isPassed ? 3 : 2;
114-
if (month === 5) return isPassed ? 4 : 3;
115-
if (month === 6) return isPassed ? 5 : 4;
116-
if (month === 7) return isPassed ? 6 : 5;
117-
if (month === 8) return isPassed ? 7 : 6;
118-
if (month === 9) return isPassed ? 8 : 7;
119-
if (month === 10) return isPassed ? 9 : 8;
120-
if (month === 11) return isPassed ? 10 : 9;
121-
return isPassed ? 11 : 10;
91+
92+
const map = {
93+
1: [12, 11], 2: [1, 12], 3: [2, 1], 4: [3, 2], 5: [4, 3], 6: [5, 4],
94+
7: [6, 5], 8: [7, 6], 9: [8, 7], 10: [9, 8], 11: [10, 9], 12: [11, 10]
95+
};
96+
return isPassed ? map[month][0] : map[month][1];
12297
}
12398

99+
// 模式切换
100+
document.querySelectorAll('input[name="inputMode"]').forEach(function (r) {
101+
r.addEventListener('change', function () {
102+
document.getElementById('solarMode').style.display = r.value === 'solar' ? '' : 'none';
103+
document.getElementById('manualMode').style.display = r.value === 'manual' ? '' : 'none';
104+
});
105+
});
106+
124107
// 表单提交
125-
document.getElementById('baziForm').addEventListener('submit', (e) => {
108+
document.getElementById('baziForm').addEventListener('submit', function (e) {
126109
e.preventDefault();
127-
128-
const gender = document.getElementById('gender').value;
129-
const mode = document.querySelector('input[name="inputMode"]:checked').value;
130-
131-
let year, solarMonth, lunarDay, hour;
132-
let processHTML = '';
133-
110+
111+
var gender = document.getElementById('gender').value;
112+
var mode = document.querySelector('input[name="inputMode"]:checked').value;
113+
var year, sm, ld, hour, html = '';
114+
var mn = ['', '正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月'];
115+
var hn = ['子时', '丑时', '丑时', '寅时', '寅时', '卯时', '卯时', '辰时', '辰时', '巳时', '巳时', '午时', '午时', '未时', '未时', '申时', '申时', '酉时', '酉时', '戌时', '戌时', '亥时', '亥时', '子时'];
116+
134117
if (mode === 'solar') {
135-
// 阳历模式
136-
let inputYear = parseInt(document.getElementById('year').value);
137-
let month = parseInt(document.getElementById('month').value);
138-
let day = parseInt(document.getElementById('day').value);
118+
var iY = parseInt(document.getElementById('year').value);
119+
var m = parseInt(document.getElementById('month').value);
120+
var d = parseInt(document.getElementById('day').value);
139121
hour = parseInt(document.getElementById('hour').value);
140-
141-
const inputMonth = month, inputDay = day, inputHour = hour;
142-
143-
// 处理23点
122+
var iM = m, iD = d, iH = hour;
123+
144124
if (hour === 23) {
145-
hour = 0;
146-
day++;
147-
const monthDays = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
148-
if ((inputYear % 4 === 0 && inputYear % 100 !== 0) || (inputYear % 400 === 0)) monthDays[2] = 29;
149-
if (day > monthDays[month]) {
150-
day = 1;
151-
month++;
152-
if (month > 12) {
153-
month = 1;
154-
inputYear++;
155-
}
156-
}
125+
hour = 0; d++;
126+
var md = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
127+
if ((iY % 4 === 0 && iY % 100 !== 0) || (iY % 400 === 0)) md[2] = 29;
128+
if (d > md[m]) { d = 1; m++; if (m > 12) { m = 1; iY++; } }
157129
}
158-
159-
solarMonth = getSolarMonth(inputYear, month, day, hour);
160-
const lunar = solarToLunar(inputYear, month, day);
130+
131+
sm = getSolarMonth(iY, m, d, hour);
132+
var lunar = solarToLunar(iY, m, d);
161133
year = lunar.year;
162-
lunarDay = lunar.day;
163-
164-
const monthNames = ['', '正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月'];
165-
const hourNames = ['子时', '丑时', '丑时', '寅时', '寅时', '卯时', '卯时', '辰时', '辰时', '巳时', '巳时', '午时', '午时', '未时', '未时', '申时', '申时', '酉时', '酉时', '戌时', '戌时', '亥时', '亥时', '子时'];
166-
167-
const is23Hour = inputHour === 23;
168-
const displayDate = is23Hour ? `${inputYear}年${month}月${day}日` : `${inputYear}年${inputMonth}月${inputDay}日`;
169-
170-
processHTML = `
171-
<div class="process-item">
172-
<strong>输入：</strong>阳历 ${inputYear}年${inputMonth}月${inputDay}日 ${inputHour}:00-${inputHour}:59
173-
</div>
174-
`;
175-
176-
if (is23Hour) {
177-
processHTML += `<div class="process-item" style="color: #ffd700;">
178-
<strong>时辰调整：</strong>23点算次日子时 → ${displayDate} 子时
179-
</div>`;
180-
}
181-
182-
processHTML += `
183-
<div class="process-item">
184-
<strong>阳历转农历：</strong>${displayDate} → 农历 <strong>${year}年${lunarDay}日</strong>
185-
</div>
186-
<div class="process-item">
187-
<strong>节气转换：</strong>${displayDate} ${hourNames[hour]} → 节气月 <strong>${monthNames[solarMonth]}</strong>
188-
</div>
189-
`;
134+
ld = lunar.day;
135+
136+
var is23 = iH === 23;
137+
var dd = is23 ? iY + '年' + m + '月' + d + '日' : iY + '年' + iM + '月' + iD + '日';
138+
139+
html = '<div class="process-item"><strong>输入：</strong>阳历 ' + iY + '年' + iM + '月' + iD + '日 ' + iH + ':00-' + iH + ':59</div>';
140+
if (is23) html += '<div class="process-item" style="color:var(--link-color)"><strong>时辰调整：</strong>23点算次日子时 → ' + dd + ' 子时</div>';
141+
html += '<div class="process-item"><strong>阳历转农历：</strong>' + dd + ' → 农历 <strong>' + year + '年' + ld + '日</strong></div>';
142+
html += '<div class="process-item"><strong>节气转换：</strong>' + dd + ' ' + hn[hour] + ' → 节气月 <strong>' + mn[sm] + '</strong></div>';
190143
} else {
191-
// 手动模式
192144
year = parseInt(document.getElementById('manualYear').value);
193-
solarMonth = parseInt(document.getElementById('solarMonth').value);
194-
lunarDay = parseInt(document.getElementById('lunarDay').value);
145+
sm = parseInt(document.getElementById('solarMonth').value);
146+
ld = parseInt(document.getElementById('lunarDay').value);
195147
hour = parseInt(document.getElementById('shiChen').value);
196-
197-
const monthNames = ['', '正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月'];
198-
const hourNames = ['子时', '丑时', '丑时', '寅时', '寅时', '卯时', '卯时', '辰时', '辰时', '巳时', '巳时', '午时', '午时', '未时', '未时', '申时', '申时', '酉时', '酉时', '戌时', '戌时', '亥时', '亥时', '子时'];
199-
200-
processHTML = `
201-
<div class="process-item">
202-
<strong>输入：</strong>手动模式
203-
</div>
204-
<div class="process-item">
205-
<strong>年份：</strong>${year}年
206-
</div>
207-
<div class="process-item">
208-
<strong>节气月：</strong>${monthNames[solarMonth]}
209-
</div>
210-
<div class="process-item">
211-
<strong>农历日：</strong>农历${lunarDay}日
212-
</div>
213-
<div class="process-item">
214-
<strong>时辰：</strong>${hourNames[hour]}
215-
</div>
216-
`;
148+
149+
html = '<div class="process-item"><strong>输入：</strong>手动模式</div>';
150+
html += '<div class="process-item"><strong>年份：</strong>' + year + '年</div>';
151+
html += '<div class="process-item"><strong>节气月：</strong>' + mn[sm] + '</div>';
152+
html += '<div class="process-item"><strong>农历日：</strong>农历' + ld + '日</div>';
153+
html += '<div class="process-item"><strong>时辰：</strong>' + hn[hour] + '</div>';
217154
}
218-
219-
const yearW = yearWeight[year] || 0;
220-
const monthW = monthWeight[solarMonth] || 0;
221-
const dayW = dayWeight[lunarDay] || 0;
222-
const hourW = hourWeight[hour] || 0;
223-
224-
const weight = yearW + monthW + dayW + hourW;
225-
const weightKey = weight.toFixed(1);
226-
const poems = gender === 'male' ? malePoems : femalePoems;
227-
const poem = poems[weightKey] || "命运未知，请核对生辰八字。";
228-
229-
processHTML += `
230-
<div class="process-item">
231-
<strong>年份骨重：</strong>${year}年 = ${yearW} 两
232-
</div>
233-
<div class="process-item">
234-
<strong>月份骨重：</strong>节气月 = ${monthW} 两
235-
</div>
236-
<div class="process-item">
237-
<strong>日期骨重：</strong>农历${lunarDay}日 = ${dayW} 两
238-
</div>
239-
<div class="process-item">
240-
<strong>时辰骨重：</strong>= ${hourW} 两
241-
</div>
242-
<div class="process-sum">
243-
总计：${yearW} + ${monthW} + ${dayW} + ${hourW} = ${weight.toFixed(1)} 两
244-
</div>
245-
`;
246-
247-
// 更新两个显示区域
248-
document.getElementById('processDisplay').innerHTML = processHTML;
249-
document.getElementById('weightDisplay').textContent = `骨重：${weight.toFixed(1)} 两`;
155+
156+
var yW = yearWeight[year] || 0;
157+
var mW = monthWeight[sm] || 0;
158+
var dW = dayWeight[ld] || 0;
159+
var hW = hourWeight[hour] || 0;
160+
var weight = yW + mW + dW + hW;
161+
var wKey = weight.toFixed(1);
162+
var poems = gender === 'male' ? malePoems : femalePoems;
163+
var poem = poems[wKey] || "命运未知，请核对生辰八字。";
164+
165+
html += '<div class="process-item"><strong>年份骨重：</strong>' + year + '年 = ' + yW + ' 两</div>';
166+
html += '<div class="process-item"><strong>月份骨重：</strong>节气月 = ' + mW + ' 两</div>';
167+
html += '<div class="process-item"><strong>日期骨重：</strong>农历' + ld + '日 = ' + dW + ' 两</div>';
168+
html += '<div class="process-item"><strong>时辰骨重：</strong>= ' + hW + ' 两</div>';
169+
html += '<div class="process-sum">总计：' + yW + ' + ' + mW + ' + ' + dW + ' + ' + hW + ' = ' + wKey + ' 两</div>';
170+
171+
document.getElementById('processDisplay').innerHTML = html;
172+
document.getElementById('weightDisplay').textContent = '骨重：' + wKey + ' 两';
250173
document.getElementById('poemDisplay').textContent = poem;
251-
document.getElementById('result').classList.add('show');
252-
253-
document.getElementById('processDisplaySide').innerHTML = processHTML;
254-
document.getElementById('weightDisplaySide').textContent = `骨重：${weight.toFixed(1)} 两`;
255-
document.getElementById('poemDisplaySide').textContent = poem;
256-
document.getElementById('resultContainer').classList.add('show');
257-
});
258174

259-
// 模式切换
260-
document.querySelectorAll('input[name="inputMode"]').forEach(radio => {
261-
radio.addEventListener('change', (e) => {
262-
const mode = e.target.value;
263-
document.getElementById('solarMode').style.display = mode === 'solar' ? 'block' : 'none';
264-
document.getElementById('manualMode').style.display = mode === 'manual' ? 'block' : 'none';
265-
});
175+
var rs = document.getElementById('result');
176+
rs.classList.add('show');
177+
rs.scrollIntoView({ behavior: 'smooth', block: 'start' });
266178
});

0 commit comments

Comments
 (0)