完整教學系列 · Full Tutorial Series

八字命理 × React Build a Chinese Astrology App from Scratch

從零開始用 React 打造完整的八字排盤、易占斷吉凶、五行分析與擇日系統。 深入講解每一個命理演算法——從農曆換算到梅花易數，手把手帶你實作。

📺 查看課程大綱 ⚙️ 核心演算法
10Episodes
~6hTotal Time
850+Lines of Code
9Features
App.jsx — 八字命理系統
八字.jsx 易占.jsx 擇日.jsx
// ── 四柱八字計算核心 ────────────────── function bzCalc(y, m, d, h) { const yp = yearPillar(y, m, d); const mp = monthPillar(y, m, d); const dp = dayPillar(y, m, d); return { year: yp, // 丙午 month: mp, // 辛卯 day: dp, // 癸卯 hour: hourPillar(dp.stem, h), }; } // ── 天赦日演算法 ────────────────────── function isTiansheRi(y, m, d) { const target = getSeasonTarget(m, d); const pillar = getDayPillar(y, m, d); return pillar.stem === target.stem && pillar.branch === target.branch; } // 春戊寅 夏甲午 秋戊申 冬甲子 ✓
課程內容 · What You'll Build

九大核心功能，一次學完

🗓️

四柱八字排盤

基於儒略日的精確年月日時柱計算，包含節氣判斷、五鼠遁時法與农曆轉換（Meeus 算法）。

核心算法
🌀

十神系統

完整 10×10 十神查表，主星（天干）與副星（藏干）對應，配合 SVG 顏色視覺化。

命理學
🎵

納音 & 星運

六十甲子納音表精準查詢算法，十二長生（陽順陰逆）完整驗證，4 個測試案例全部通過。

已驗證
⏳

大運計算

順逆運方向判斷、起運年齡精算（3天=1年）、8個大運序列展示並高亮當前活躍大運。

動態計算
⭐

神煞系統

天乙貴人、文昌、驛馬、桃花、將星、華蓋、羊刃、天狗、血刃等主要神煞完整計算。

吉凶判斷
🔥

五行分析

加權五行分數（月柱最重×12），身強/弱判斷，喜用神推導，圓餅圖視覺化。

數學模型
☯️

易占斷吉凶

梅花易數年月日時法，64卦完整數據庫，互卦/變卦/體用計算，SVG 卦象繪製。

創意算法
📅

擇日萬年曆

建除十二神計算，月視圖農曆日期顯示，節氣標記，四離四絕日，動態月份導航。

完整日曆
☀️

天赦日系統

春戊寅/夏甲午/秋戊申/冬甲子自動計算，年份切換即時更新，日曆高亮顯示。

本期新增
課程大綱 · Episode Guide

完整 10集 系列教學

EP 01

專案介紹與環境建置 INTRO

認識八字命理基礎、React 專案架構、設計系統（顏色、字型、SVG 波浪背景）
Vite + React CSS Variables Five Elements Colors Tab Navigation
25 min
EP 02

儒略日 & 農曆轉換 CORE

Julian Day Number 算法、Jean Meeus 新月計算、中氣判斷閏月、CNY 對照表
JD Formula New Moon JDE Sun Longitude Leap Month Logic
45 min
EP 03

四柱八字核心算法 CORE

年柱（立春前後）、月柱（五虎遁）、日柱（JD 參考錨點 1900-01-01 甲戌）、時柱（五鼠遁）
Year Pillar Month Pillar Wǔhǔ Day Pillar JD Ref Hour Pillar Wǔshǔ
40 min
EP 04

十神系統 & 藏干副星

10×10 十神查表、地支藏干（本氣/中氣/余氣）、主星/副星顏色對應、元素色彩方案
Ten Gods Table Hidden Stems Map SS Color Mapping Visual Design
35 min
EP 05

納音、星運 & 大運序列

60甲子 CRT 位置計算、十二長生陽順陰逆、節氣距離計算大運起歲（3天=1年）
Nayin CRT Pos60 12 Growth Stages Jie Days Distance Dayun Start Age
40 min
EP 06

神煞 & 五行分析 Tab

9種神煞計算公式、加權五行評分、身強/弱判斷、喜用神推導、SVG 圓餅圖
Shensha Formulas Weighted El Score Qiangruo Logic SVG Pie Chart
38 min
EP 07

易占斷吉凶 — 梅花易數 精彩

年月日時起卦法、64卦完整數據庫、互卦/變卦計算、體用五行判斷、SVG 卦象繪製
Meihua Formula 64 Gua Database Mutual/Changed Gua Ti Yong Analysis SVG Hexagram
50 min
EP 08

易占 — 吉凶評分 & Donut Chart

本/互/變卦加權評分（50/30/20）、體用五行生剋調整值、SVG Donut 圖表設計
Luck Scoring 5-Phase Relations SVG Donut Chart Verification 4/4
32 min
EP 09

擇日萬年曆實作 NEW

建除十二神月份計算、農曆日期顯示、24節氣標記、四離四絕日系統、月份導航
Jianzhu Formula Calendar Grid 24 Solar Terms 4Li 4Jue Days
42 min
EP 10

天赦日系統 & 完整整合 FINALE

春戊寅/夏甲午/秋戊申/冬甲子計算、年份動態更新、日曆高亮、全功能整合演示
Tianshe Algorithm Season Boundaries Calendar Highlight Full App Demo
45 min
技術棧 · Tech Stack

純前端，零依賴算法

⚛️
React 18
useState · useMemo · Components
⚡
Vite
HMR · Fast Build · JSX
🎨
Inline CSS
Zero CSS-in-JS · Style Objects
🔢
Pure Math
Meeus · JD · CRT · Trig
🖼️
SVG
Hexagrams · Pie · Donut
核心算法 · Key Algorithms

每個公式都經過實際驗證

🗓️ 日柱計算（儒略日法） 驗證 ✓
// 參考錨點: 1900-01-01 = 甲戌 // JD_REF = 2415021 diff = JD(year, month, day) − 2415021 stem = STEMS[(diff % 10 + 10) % 10] branch = BRANCHES[((10+diff) % 12 + 12) % 12] // 測試: 2026-03-29 → 壬寅 ✓ // 測試: 2026-03-05 → 戊寅 ✓
🌙 梅花易數起卦 4/4 驗證 ✓
// 農曆年支數(子=1..亥=12) yn = (lunarYear − 1900) % 12 + 1 sum3 = yn + month + day sum4 = sum3 + hourBranch upper = sum3 % 8 || 8 lower = sum4 % 8 || 8 moving = sum4 % 6 || 6 // 1956-09-20 → 天雷無妄 ✓ // 2026-04-02 → 地雷復 ✓
☀️ 天赦日計算 年份動態 ✓
// 春(Feb4-May5): 戊寅 // 夏(May6-Aug6): 甲午 // 秋(Aug7-Nov6): 戊申 // 冬(Nov7-Feb3): 甲子 target = getSeasonTarget(month, day) dayPillar = getDayPillar(year, m, d) isTianshe = stem===target.stem && branch===target.branch // 2026: 6次天赦日自動計算
⏳ 大運起歲算法 節氣測距 ✓
// 順運: 距下一節 天數 // 逆運: 距上一節 天數 days = nextJie(y,m,d) / prevJie(y,m,d) startAge = Math.floor(days / 3) startMonths = Math.round((days%3) * 4) // 3天 = 1年, 1天 = 4個月 // 2026-03-30 男 → 2歲起運 ✓
先備知識 · Prerequisites

適合有 React 基礎 的開發者

✅ 必備技能

  • JavaScript ES6+（箭頭函數、解構、模板字串）
  • React useState / useMemo Hooks
  • JSX 語法與 Component 概念
  • 基本 CSS / Inline Styles
  • Node.js 環境安裝

💡 加分但非必要

  • SVG 基礎（課程中會詳細說明）
  • 基本命理知識（課程中會介紹）
  • 數論 / 模運算（CRT 算法）
  • 天文曆算概念
縮略圖設計 · Thumbnail Concepts

三種風格方案

EP 03
生辰八字
年
丙
午
月
辛
卯
日
癸
卯
時
壬
戌
命理 × 程式碼
React · Algorithm · Chinese Astrology
EP 07
易占斷吉凶
本卦
天雷無妄
梅花易數 年月日時法
EP 09
2026 四月份
日一二三四五六
1滿十四
2平十五
3定十六
4執十七
5執清明
6破十九
7危二十
8成天赦
9收廿二
10開廿三
11閉廿四
擇日萬年曆 · 建除十二神 · 天赦日

縮略圖建議尺寸: 1280 × 720px · 使用 Canva 或 Figma 套用以上設計方向