网站首页 > 基础教程正文

通过天干地支计算对应五行

ccvgpt 2025-01-10 12:01:12 基础教程 2 ℃
通过天干地支对应五行统计五行出现次数
<!DOCTYPE html>
<html lang="zh">

<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;
            margin: 20px;
        }

        h1 {
            color: #333;
        }

        .bazi-container {
            margin-top: 20px;
        }

        .bazi-item {
            margin-bottom: 10px;
        }

        .wuxing-count {
            margin-top: 20px;
        }

        input[type="text"] {
            padding: 8px;
            font-size: 16px;
            margin-right: 10px;
        }

        button {
            padding: 8px 16px;
            font-size: 16px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>
    <h1>八字解析</h1>

    <div>
        <label for="baziInput">请输入八字（8个字符）:</label>
        <input type="text" id="baziInput" placeholder="例如: 甲子丙午戊寅癸酉">
        <button onclick="submitBazi()">提交</button>
    </div>

    <div id="baziResult" class="bazi-container"></div>
    <div id="wuxingResult" class="wuxing-count"></div>
</body>
<script>
    // 天干的五行对应关系
    const tianganWuxing = {
        "甲": "木",
        "乙": "木",
        "丙": "火",
        "丁": "火",
        "戊": "土",
        "己": "土",
        "庚": "金",
        "辛": "金",
        "壬": "水",
        "癸": "水",
    };

    // 地支的五行对应关系
    const dizhiWuxing = {
        "子": "水",
        "丑": "土",
        "寅": "木",
        "卯": "木",
        "辰": "土",
        "巳": "火",
        "午": "火",
        "未": "土",
        "申": "金",
        "酉": "金",
        "戌": "土",
        "亥": "水",
    };

    // 生辰八字解析
    function getBazi(wu) {
        if (wu.length !== 8) {
            throw new Error("输入的八字格式不正确，八字长度应为8个字符。");
        }

        // 解析输入的八字
        const bazi = {
            "年柱": wu.slice(0, 2),  // 前两个字符是年柱
            "月柱": wu.slice(2, 4),  // 中间两个字符是月柱
            "日柱": wu.slice(4, 6),  // 中间两个字符是日柱
            "时柱": wu.slice(6, 8),  // 后两个字符是时柱
        };

        // 获取每柱的天干地支和对应的五行
        const result = {};
        const wuxingCount = {
            "木": 0,
            "火": 0,
            "土": 0,
            "金": 0,
            "水": 0,
        };  // 初始化五行计数器

        for (let key in bazi) {
            const value = bazi[key];
            const tianGan = value[0];  // 天干
            const diZhi = value[1];  // 地支

            // 获取天干和地支对应的五行
            const tianGanWuxing = tianganWuxing[tianGan];
            const diZhiWuxing = dizhiWuxing[diZhi];

            // 更新五行计数
            wuxingCount[tianGanWuxing] += 1;
            wuxingCount[diZhiWuxing] += 1;

            result[`${key}=${value}`] = {
                "天干": tianGan,
                "地支": diZhi,
                "天干五行": tianGanWuxing,
                "地支五行": diZhiWuxing,
            };
        }

        return { result, wuxingCount };
    }

    // 将八字解析结果展示到页面
    function displayBaziResult(wu) {
        try {
            // 解析八字
            const { result, wuxingCount } = getBazi(wu);

            // 1. 展示八字解析的每柱信息
            const baziResultDiv = document.getElementById("baziResult");
            baziResultDiv.innerHTML = "";  // 清空之前的内容

            for (let pillar in result) {
                const data = result[pillar];
                const baziItem = document.createElement("div");
                baziItem.classList.add("bazi-item");
                baziItem.innerHTML = `${pillar}: 天干: <strong>${data["天干"]}</strong>，地支: <strong>${data["地支"]}</strong>，天干五行: <strong>${data["天干五行"]}</strong>，地支五行: <strong>${data["地支五行"]}</strong>`;
                baziResultDiv.appendChild(baziItem);
            }

            // 2. 展示五行统计结果
            const wuxingResultDiv = document.getElementById("wuxingResult");
            wuxingResultDiv.innerHTML = "<h2>五行统计</h2>";  // 标题

            for (let wuxing in wuxingCount) {
                const wuxingItem = document.createElement("div");
                wuxingItem.classList.add("wuxing-item");
                wuxingItem.innerHTML = `${wuxing}: <strong>${wuxingCount[wuxing]}</strong> 次`;
                wuxingResultDiv.appendChild(wuxingItem);
            }

        } catch (e) {
            console.error(`发生错误: ${e.message}`);
            alert("输入的八字格式不正确！");
        }
    }

    // 提交按钮的点击事件处理
    function submitBazi() {
        const baziInput = document.getElementById("baziInput").value.trim(); // 获取用户输入的八字
        if (baziInput.length !== 8) {
            alert("请输入一个有效的八字（8个字符）。");
        } else {
            displayBaziResult(baziInput); // 调用显示函数
        }
    }
</script>

</html>
通过天干地支计算对应五行
上一篇： PHP常用类 – 缓存类 cache
下一篇： PHP 安全的最佳实践
网站首页 > 基础教程 正文

通过天干地支计算对应五行

猜你喜欢

网站首页 > 基础教程正文
