{"id":1870,"date":"2021-04-04T10:38:21","date_gmt":"2021-04-04T02:38:21","guid":{"rendered":"https:\/\/tygtw.ddns.net\/?p=1870"},"modified":"2026-01-05T10:23:22","modified_gmt":"2026-01-05T02:23:22","slug":"%e8%a4%87%e5%88%a9%e8%a8%88%e7%ae%97%e6%a9%9f%e5%ae%9a%e6%99%82%e5%ae%9a%e9%a1%8d%e3%80%81%e9%9b%b6%e5%ad%98%e6%95%b4%e4%bb%98","status":"publish","type":"post","link":"https:\/\/tygtw.ddns.net\/wordpress\/?p=1870","title":{"rendered":"\u8907\u5229\u8a08\u7b97\u6a5f(\u5b9a\u6642\u5b9a\u984d\u3001\u96f6\u5b58\u6574\u4ed8\u3001\u55ae\u7b46\u6295\u8cc7)"},"content":{"rendered":"\n<style>\n      .container { width: 100%; max-width: 550px; }\n\n        .tabs {\n            display: flex;\n            gap: 5px;\n            margin-bottom: 20px;\n            background: #e2e8f0;\n            padding: 5px;\n            border-radius: 8px;\n            overflow-x: auto; \/* \u78ba\u4fdd\u624b\u6a5f\u7248\u6a19\u7c64\u53ef\u6ed1\u52d5 *\/\n            white-space: nowrap;\n        }\n\n        .tab-btn {\n            flex: 1;\n            padding: 10px 12px;\n            border: none;\n            background: none;\n            cursor: pointer;\n            font-size: 14px;\n            border-radius: 6px;\n            color: #64748b;\n            transition: 0.3s;\n        }\n\n        .tab-btn.active {\n            background: white;\n            color: var(--primary-color);\n            font-weight: bold;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n\n        .calculator-card {\n            background: var(--card-bg);\n            padding: 24px;\n            border-radius: 12px;\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n            display: none;\n        }\n\n        .calculator-card.active { display: block; }\n\n        h2 { margin-top: 0; color: #1e293b; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }\n\n        .input-group { margin-bottom: 15px; }\n\n        label { display: block; margin-bottom: 5px; color: #475569; font-size: 0.9rem; font-weight: 500; }\n\n        input {\n            width: 100%;\n            padding: 12px;\n            border: 1px solid #cbd5e1;\n            border-radius: 6px;\n            box-sizing: border-box;\n            font-size: 1rem;\n        }\n\n        button.calc-btn {\n            width: 100%;\n            padding: 12px;\n            \n            color: white;\n            border: none;\n            border-radius: 6px;\n            font-size: 1rem;\n            font-weight: bold;\n            cursor: pointer;\n            margin-top: 10px;\n        }\n\n        button.calc-btn:hover { background-color: #1d4ed8; }\n\n        .result-area {\n            margin-top: 20px;\n            padding: 15px;\n            background-color: #f1f5f9;\n            border-radius: 8px;\n            border-left: 4px solid var(--primary-color);\n        }\n\n        .result-item { margin: 8px 0; font-size: 0.95rem; color: #334155; }\n        .highlight { font-weight: bold; color: #0f172a; font-size: 1.1rem; }\n        .warning { color: #dc2626; font-weight: bold; }\n    <\/style>\n<div class=\"container\">\n    <div class=\"tabs\">\n        <button class=\"tab-btn active\" onclick=\"switchTab(0)\">\u5831\u916c\u7387<\/button>\n        <button class=\"tab-btn\" onclick=\"switchTab(1)\">\u5b9a\u6642\u5b9a\u984d<\/button>\n        <button class=\"tab-btn\" onclick=\"switchTab(2)\">\u55ae\u7b46\u6295\u8cc7<\/button>\n        <button class=\"tab-btn\" onclick=\"switchTab(3)\">\u672c\u91d1\u63d0\u9818<\/button>\n    <\/div>\n\n    <div id=\"calc-0\" class=\"calculator-card active\">\n        <h2>\ud83d\udcc8 \u5e73\u5747\u5e74\u5831\u916c\u7387\u8a08\u7b97<\/h2>\n        <div class=\"input-group\">\n            <label>\u7d2f\u7a4d\u7e3d\u5831\u916c\u7387 (%)<\/label>\n            <input type=\"number\" id=\"c1-total-rate\" placeholder=\"\u4f8b\u5982\uff1a50\">\n        <\/div>\n        <div style=\"display: flex; gap: 10px;\">\n            <div class=\"input-group\" style=\"flex: 1;\">\n                <label>\u7d93\u904e\u5e74<\/label>\n                <input type=\"number\" id=\"c1-years\" value=\"1\">\n            <\/div>\n            <div class=\"input-group\" style=\"flex: 1;\">\n                <label>\u7d93\u904e\u6708<\/label>\n                <input type=\"number\" id=\"c1-months\" value=\"0\">\n            <\/div>\n        <\/div>\n        <button class=\"calc-btn\" onclick=\"calculateRate()\">\u958b\u59cb\u8a08\u7b97<\/button>\n        <div id=\"res-1\" class=\"result-area\" style=\"display: none;\"><\/div>\n    <\/div>\n\n    <div id=\"calc-1\" class=\"calculator-card\">\n        <h2>\u23f3 \u5b9a\u6642\u5b9a\u984d\u8907\u5229\u8a08\u7b97<\/h2>\n        <div class=\"input-group\">\n            <label>\u6bcf\u6708\u6295\u5165\u8cc7\u91d1 (\u5143)<\/label>\n            <input type=\"number\" id=\"c2-monthly\" placeholder=\"\u4f8b\u5982\uff1a10000\">\n        <\/div>\n        <div class=\"input-group\">\n            <label>\u9810\u5b9a\u6295\u5165\u5e7e\u5e74<\/label>\n            <input type=\"number\" id=\"c2-years\" placeholder=\"\u4f8b\u5982\uff1a10\">\n        <\/div>\n        <div class=\"input-group\">\n            <label>\u6bcf\u5e74\u5229\u7387 (%)<\/label>\n            <input type=\"number\" id=\"c2-rate\" step=\"0.1\" placeholder=\"\u4f8b\u5982\uff1a6\">\n        <\/div>\n        <button class=\"calc-btn\" onclick=\"calculateRegular()\">\u8907\u5229\u958b\u59cb\u8a08\u7b97<\/button>\n        <div id=\"res-2\" class=\"result-area\" style=\"display: none;\"><\/div>\n    <\/div>\n\n    <div id=\"calc-2\" class=\"calculator-card\">\n        <h2>\ud83d\udcb0 \u55ae\u7b46\u6295\u8cc7\u8907\u5229\u8a08\u7b97<\/h2>\n        <div class=\"input-group\">\n            <label>\u7e3d\u6295\u5165\u8cc7\u91d1 (\u5143)<\/label>\n            <input type=\"number\" id=\"c3-principal\" placeholder=\"\u4f8b\u5982\uff1a100000\">\n        <\/div>\n        <div class=\"input-group\">\n            <label>\u9810\u5b9a\u6295\u5165\u5e7e\u5e74<\/label>\n            <input type=\"number\" id=\"c3-years\" placeholder=\"\u4f8b\u5982\uff1a10\">\n        <\/div>\n        <div class=\"input-group\">\n            <label>\u6bcf\u5e74\u5229\u7387 (%)<\/label>\n            <input type=\"number\" id=\"c3-rate\" step=\"0.1\" placeholder=\"\u4f8b\u5982\uff1a6\">\n        <\/div>\n        <button class=\"calc-btn\" onclick=\"calculateSingle()\">\u55ae\u7b46\u6295\u8cc7\u958b\u59cb\u8a08\u7b97<\/button>\n        <div id=\"res-3\" class=\"result-area\" style=\"display: none;\"><\/div>\n    <\/div>\n\n    <div id=\"calc-3\" class=\"calculator-card\">\n        <h2>\ud83c\udfe6 \u672c\u91d1\u63d0\u9818\u8a66\u7b97<\/h2>\n        <div class=\"input-group\">\n            <label>\u521d\u59cb\u672c\u91d1 (\u5143)<\/label>\n            <input type=\"number\" id=\"c4-principal\" placeholder=\"\u4f8b\u5982\uff1a1000000\">\n        <\/div>\n        <div class=\"input-group\">\n            <label>\u6bcf\u6708\u63d0\u9818\u91d1\u984d (\u5143)<\/label>\n            <input type=\"number\" id=\"c4-withdraw\" placeholder=\"\u4f8b\u5982\uff1a15000\">\n        <\/div>\n        <div class=\"input-group\">\n            <label>\u5269\u9918\u672c\u91d1\u5e74\u5831\u916c\u7387 (%)<\/label>\n            <input type=\"number\" id=\"c4-rate\" step=\"0.1\" placeholder=\"\u4f8b\u5982\uff1a5\">\n        <\/div>\n        <button class=\"calc-btn\"  onclick=\"calculateWithdraw()\">\u672c\u91d1\u63d0\u9818\u958b\u59cb\u8a08\u7b97<\/button>\n        <div id=\"res-4\" class=\"result-area\" style=\"display: none;\"><\/div>\n    <\/div>\n<\/div>\n\n<script>\n    function switchTab(index) {\n        document.querySelectorAll('.tab-btn').forEach((btn, i) => btn.classList.toggle('active', i === index));\n        document.querySelectorAll('.calculator-card').forEach((card, i) => card.classList.toggle('active', i === index));\n    }\n\n    function formatNum(num) { return Math.round(num).toLocaleString(); }\n\n    function calculateRate() {\n        const totalRate = parseFloat(document.getElementById('c1-total-rate').value) \/ 100;\n        const years = parseFloat(document.getElementById('c1-years').value) || 0;\n        const months = parseFloat(document.getElementById('c1-months').value) || 0;\n        const totalYears = years + (months \/ 12);\n        if (totalYears <= 0) return alert(\"\u8acb\u8f38\u5165\u6642\u9593\");\n        const cRate = (Math.pow(1 + totalRate, 1 \/ totalYears) - 1) * 100;\n        const sRate = (totalRate \/ totalYears) * 100;\n        showResult('res-1', `\u8907\u5229\u5e74\u5316\u5831\u916c\u7387\uff1a<span class=\"highlight\">${cRate.toFixed(2)}%<\/span><br>\u55ae\u5229\u5e73\u5747\u5e74\u5831\u916c\u7387\uff1a<span class=\"highlight\">${sRate.toFixed(2)}%<\/span>`);\n    }\n\n    function calculateRegular() {\n        const m = parseFloat(document.getElementById('c2-monthly').value);\n        const y = parseFloat(document.getElementById('c2-years').value);\n        const r = (parseFloat(document.getElementById('c2-rate').value) \/ 100) \/ 12;\n        const months = y * 12;\n        const cost = m * months;\n        const total = m * ((Math.pow(1 + r, months) - 1) \/ r) * (1 + r);\n        showResult('res-2', `\u6295\u5165\u6210\u672c\uff1a${formatNum(cost)} \u5143<br>\u5229\u606f\u6240\u5f97\uff1a${formatNum(total-cost)} \u5143<br>\u672c\u606f\u5408\u8a08\uff1a<span class=\"highlight\">${formatNum(total)} \u5143<\/span>`);\n    }\n\n    function calculateSingle() {\n        const p = parseFloat(document.getElementById('c3-principal').value);\n        const y = parseFloat(document.getElementById('c3-years').value);\n        const r = parseFloat(document.getElementById('c3-rate').value) \/ 100;\n        const total = p * Math.pow(1 + r, y);\n        showResult('res-3', `\u6295\u5165\u6210\u672c\uff1a${formatNum(p)} \u5143<br>\u5229\u606f\u6240\u5f97\uff1a${formatNum(total-p)} \u5143<br>\u672c\u606f\u5408\u8a08\uff1a<span class=\"highlight\">${formatNum(total)} \u5143<\/span>`);\n    }\n\n    \/\/ \u7b2c4\u7a2e\uff1a\u672c\u91d1\u63d0\u9818\u908f\u8f2f\n    function calculateWithdraw() {\n        let balance = parseFloat(document.getElementById('c4-principal').value);\n        const withdraw = parseFloat(document.getElementById('c4-withdraw').value);\n        const annualRate = parseFloat(document.getElementById('c4-rate').value) \/ 100;\n        const monthlyRate = annualRate \/ 12;\n\n        if (isNaN(balance) || isNaN(withdraw)) return alert(\"\u8acb\u8f38\u5165\u5b8c\u6574\u91d1\u984d\");\n\n        let totalWithdrawn = 0;\n        let months = 0;\n        const maxMonths = 1200; \/\/ \u6700\u591a\u8a08\u7b97 100 \u5e74\uff0c\u9632\u6b62\u7121\u9650\u8ff4\u5708\n\n        \/\/ \u6aa2\u67e5\u662f\u5426\u5229\u606f\u5927\u65bc\u63d0\u9818\uff08\u8ca1\u5bcc\u81ea\u7531\u72c0\u614b\uff09\n        if (balance * monthlyRate >= withdraw) {\n            showResult('res-4', `<span style=\"color:var(--success-color); font-weight:bold;\">\u606d\u559c\uff01\u60a8\u7684\u5229\u606f\u5df2\u5927\u65bc\u6bcf\u6708\u63d0\u9818\u91d1\u984d\u3002<\/span><br>\u672c\u91d1\u5c07\u6c38\u9060\u9818\u4e0d\u5b8c\uff0c\u5be6\u73fe\u8ca1\u52d9\u81ea\u7531\uff01<br>\u6bcf\u6708\u5229\u606f\u7d04\uff1a${formatNum(balance * monthlyRate)} \u5143`);\n            return;\n        }\n\n        while (balance >= withdraw && months < maxMonths) {\n            balance = (balance - withdraw); \/\/ \u5148\u63d0\u9818\n            balance = balance * (1 + monthlyRate); \/\/ \u5269\u9918\u672c\u91d1\u6efe\u5229\u606f\n            totalWithdrawn += withdraw;\n            months++;\n        }\n\n        const years = Math.floor(months \/ 12);\n        const remainingMonths = months % 12;\n        \n        let resultHtml = `\u9019\u7b46\u9322\u9810\u8a08\u53ef\u63d0\u9818\uff1a<span class=\"highlight\">${years} \u5e74 ${remainingMonths} \u500b\u6708<\/span><br>`;\n        resultHtml += `\u7d2f\u8a08\u63d0\u9818\u7e3d\u984d\uff1a<span class=\"highlight\">${formatNum(totalWithdrawn)} \u5143<\/span><br>`;\n        resultHtml += `\u6700\u5f8c\u5269\u9918\u672c\u91d1\uff1a<span class=\"highlight\">${formatNum(Math.max(0, balance))} \u5143<\/span>`;\n        \n        showResult('res-4', resultHtml);\n    }\n\n    function showResult(id, html) {\n        const el = document.getElementById(id);\n        el.style.display = 'block';\n        el.innerHTML = html;\n    }\n<\/script>\n\u76f8\u95dc\u9023\u7d50\uff1a[<a href=\"https:\/\/tygtw.ddns.net\/wordpress\/?p=3997\">\u8cb8\u6b3e\u8a66\u7b97<\/a>]\n","protected":false},"excerpt":{"rendered":"<p>\u5831\u916c\u7387 \u5b9a\u6642\u5b9a\u984d \u55ae\u7b46\u6295\u8cc7 \u672c\u91d1\u63d0\u9818 \ud83d\udcc8 \u5e73\u5747\u5e74\u5831&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"h5ap_radio_sources":[],"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1870","post","type-post","status-publish","format-standard","hentry","category-uncategorized","wpcat-1-id"],"_links":{"self":[{"href":"https:\/\/tygtw.ddns.net\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1870","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tygtw.ddns.net\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tygtw.ddns.net\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tygtw.ddns.net\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tygtw.ddns.net\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1870"}],"version-history":[{"count":19,"href":"https:\/\/tygtw.ddns.net\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1870\/revisions"}],"predecessor-version":[{"id":4016,"href":"https:\/\/tygtw.ddns.net\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1870\/revisions\/4016"}],"wp:attachment":[{"href":"https:\/\/tygtw.ddns.net\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1870"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tygtw.ddns.net\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1870"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tygtw.ddns.net\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}