跳转到内容

Temp：修订间差异

←上一编辑下一编辑→
可视化wikitext
FC​（留言 | 贡献）
行政员、​界面管理员、​管理员
2,414次编辑
无编辑摘要
FC​（留言 | 贡献）
行政员、​界面管理员、​管理员
2,414次编辑
无编辑摘要
第1行： 第1行：
<div id="bazi-app-container">
<html>
<div id="bazi-app-root" style="all: initial; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;">
     <style>
     <style>
         .bz-box {
         .bz-container {
             background: #ffffff;
            max-width: 600px;
             border: 2px solid #b32424;
            margin: 20px auto;
            padding: 25px;
             background: #fff;
             border: 1px solid #d1d1d1;
             border-radius: 12px;
             border-radius: 12px;
            max-width: 550px;
             box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            margin: 20px auto;
            overflow: hidden;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            border-top: 5px solid #b32424;
             box-shadow: 0 4px 15px rgba(0,0,0,0.1);
         }
         }
         .bz-title {
         .bz-header {
            background: #fdf2f2;
            padding: 20px;
             text-align: center;
             text-align: center;
        }
        .bz-header h2 {
            margin: 0;
             color: #b32424;
             color: #b32424;
            font-size: 1.5em;
        }
        .bz-body { padding: 25px; }
        .bz-input-group {
            display: flex;
            justify-content: center;
            gap: 10px;
             margin-bottom: 20px;
             margin-bottom: 20px;
             font-size: 1.5em;
             flex-wrap: wrap;
            border-bottom: 1px dashed #ccc;
            padding-bottom: 10px;
         }
         }
         .bz-row { margin-bottom: 15px; text-align: center; }
         .bz-input-group div { text-align: left; }
         .bz-input {
        .bz-input-group label { display: block; font-size: 12px; color: #666; margin-bottom: 4px; }
             border: 1px solid #aaa;
         .bz-input-group input {
            padding: 6px;
            padding: 8px;
             border: 1px solid #ccc;
             border-radius: 4px;
             border-radius: 4px;
             width: 60px;
             width: 70px;
             margin: 0 5px;
             font-size: 14px;
         }
         }
         .bz-btn {
         .bz-btn {
            display: block;
            width: 100%;
             background: #b32424;
             background: #b32424;
             color: white;
             color: #fff;
             border: none;
             border: none;
             padding: 10px 30px;
             padding: 12px;
             border-radius: 20px;
             border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
             cursor: pointer;
             cursor: pointer;
            font-size: 1em;
             transition: background 0.2s;
             transition: 0.3s;
         }
         }
         .bz-btn:hover { background: #d32f2f; transform: scale(1.05); }
         .bz-btn:hover { background: #d32f2f; }
        .bz-result {
            margin-top: 30px;
            display: none;
            animation: fadeIn 0.5s;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
         .bz-table {
         .bz-table {
             width: 100%;
             width: 100%;
            margin-top: 25px;
             border-collapse: collapse;
             border-collapse: collapse;
             display: none;
             table-layout: fixed;
         }
         }
         .bz-table th { background: #fdf2f2; color: #666; font-weight: normal; padding: 10px; border: 1px solid #eee; }
         .bz-table th { background: #f9f9f9; padding: 10px; border: 1px solid #eee; font-weight: normal; color: #888; }
         .bz-table td {  
         .bz-table td {  
            padding: 20px 10px;
             border: 1px solid #eee;  
             border: 1px solid #eee;  
            padding: 20px 5px;
             text-align: center;  
             text-align: center;  
            font-size: 1.8em;
            font-weight: bold;
            color: #333;
         }
         }
         .wuxing-tag { font-size: 0.4em; display: block; color: #888; margin-top: 5px; }
        .gz-text { font-size: 2em; font-weight: bold; color: #333; display: block; }
         .wuxing-tag {  
            display: inline-block;
            margin-top: 8px;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
            color: #fff;
        }
        /* 五行颜色 */
        .wx-木 { background: #4caf50; } .wx-火 { background: #f44336; }
        .wx-土 { background: #8d6e63; } .wx-金 { background: #ffb300; }
        .wx-水 { background: #2196f3; }
     </style>
     </style>


     <div class="bz-box">
     <div class="bz-container">
         <div class="bz-title">☯ 生辰八字在线排盘</div>
         <div class="bz-header">
        <div class="bz-row">
             <h2>☯ 生辰八字专业排盘</h2>
             <input type="number" id="y" class="bz-input" value="1995"> 年
            <input type="number" id="m" class="bz-input" value="8"> 月
            <input type="number" id="d" class="bz-input" value="15"> 日
            <input type="number" id="h" class="bz-input" value="12"> 时
         </div>
         </div>
         <div class="bz-row">
         <div class="bz-body">
             <button class="bz-btn" onclick="runBazi()">立即测算</button>
            <div class="bz-input-group">
                <div><label>公历年</label><input type="number" id="y" value="2026"></div>
                <div><label>月</label><input type="number" id="m" value="2"></div>
                <div><label>日</label><input type="number" id="d" value="5"></div>
                <div><label>时(0-23)</label><input type="number" id="h" value="12"></div>
            </div>
             <button class="bz-btn" onclick="calculateBazi()">开始排盘测算</button>
 
            <div id="bz-result-box" class="bz-result">
                <table class="bz-table">
                    <thead>
                        <tr><th>年柱</th><th>月柱</th><th>日柱</th><th>时柱</th></tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td id="res-year"></td>
                            <td id="res-month"></td>
                            <td id="res-day"></td>
                            <td id="res-hour"></td>
                        </tr>
                    </tbody>
                </table>
                <div id="wuxing-analysis" style="margin-top:15px; text-align:center; color:#666; font-size:14px;"></div>
            </div>
         </div>
         </div>
        <table id="resultTable" class="bz-table">
            <tr><th>年柱 (根)</th><th>月柱 (苗)</th><th>日柱 (花)</th><th>时柱 (果)</th></tr>
            <tr>
                <td id="r-year"></td>
                <td id="r-month"></td>
                <td id="r-day"></td>
                <td id="r-hour"></td>
            </tr>
        </table>
     </div>
     </div>


     <script>
     <script>
        function runBazi() {
            const year = parseInt(document.getElementById('y').value);
            const month = parseInt(document.getElementById('m').value);
            const day = parseInt(document.getElementById('d').value);
            const hour = parseInt(document.getElementById('h').value);
            const stems = ["甲", "乙", "丙", "丁", "戊", "己", "庚", "辛", "壬", "癸"];
            const branches = ["子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌", "亥"];
            // 1. 日柱算法 (JD)
            let py = year, pm = month;
            if (month <= 2) { py--; pm += 12; }
            let b = 2 - Math.floor(py/100) + Math.floor(Math.floor(py/100)/4);
            let jd = Math.floor(365.25*(py+4716)) + Math.floor(30.6001*(pm+1)) + day + b - 1524.5;
            let dayIdx = (jd + 1) % 60;
            // 2. 节气简易计算
            const getTermDay = (y, m) => {
                const base = [0, 6.11, 4.15, 5.56, 5.02, 5.65, 6.14, 7.53, 7.83, 8, 8.43, 7.54, 7.45];
                return Math.floor((y % 100) * 0.2422 + base[m] + (y >= 2000 ? -0.5 : 0)) - Math.floor((y % 100 - 1) / 4);
            };
            // 3. 计算四柱
            let gzYearVal = (month < 2 || (month === 2 && day < getTermDay(year, 2))) ? year - 1 : year;
            let yearIdx = (gzYearVal - 3) % 60;
            if (yearIdx <= 0) yearIdx += 60;
            let monthOrder = (day < getTermDay(year, month)) ? month - 1 : month;
            if (monthOrder < 1) monthOrder = 12;
            let monthGanIdx = (((yearIdx % 10 || 10) % 5) * 2 + monthOrder) % 10 || 10;
            let monthZhiIdx = (monthOrder + 2) % 12 || 12;
            let hourZhiIdx = Math.floor((hour + 1) / 2) % 12 + 1;
            let dayGanIdx = dayIdx % 10 || 10;
            let hourGanIdx = ((dayGanIdx % 5) * 2 + hourZhiIdx - 2) % 10 || 10;
            const formatGZ = (g, z) => stems[g-1] + branches[z-1];
            // 4. 显示
            document.getElementById('r-year').innerHTML = formatGZ(yearIdx % 10 || 10, yearIdx % 12 || 12);
            document.getElementById('r-month').innerHTML = formatGZ(monthGanIdx, monthZhiIdx);
            document.getElementById('r-day').innerHTML = formatGZ(dayGanIdx, dayIdx % 12 || 12);
            document.getElementById('r-hour').innerHTML = formatGZ(hourGanIdx, hourZhiIdx);
            document.getElementById('resultTable').style.display = 'table';
        }
    </script>
</div>
检索自“http://wiki.fangc.top/wiki/Temp”