{"id":2077,"date":"2026-06-30T09:36:05","date_gmt":"2026-06-30T01:36:05","guid":{"rendered":"https:\/\/www.funpt.cn\/?page_id=2077"},"modified":"2026-10-28T13:29:01","modified_gmt":"2026-10-28T05:29:01","slug":"%e5%8d%a1%e6%b0%8f%e5%85%ac%e5%bc%8f%ef%bc%88%e5%bf%83%e7%8e%87%ef%bc%89%e5%82%a8%e5%a4%87%e6%b3%95","status":"publish","type":"page","link":"https:\/\/www.funpt.cn\/?page_id=2077","title":{"rendered":"\u5361\u6c0f\u516c\u5f0f\uff08\u5fc3\u7387\uff09\u50a8\u5907\u6cd5"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2077\" class=\"elementor elementor-2077\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9422e43 e-flex e-con-boxed e-con e-parent\" data-id=\"9422e43\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb42dce elementor-widget elementor-widget-html\" data-id=\"cb42dce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"app\">\n<style>\n  \/* ================= \u57fa\u7ebf\u53d8\u91cf ================= *\/\n  #app {\n    --primary: #2563eb;\n    --primary-d: #1d4ed8;\n    --primary-color: #2563eb;\n    --secondary-color: #1d4ed8;\n    --success-color: #15803d;\n    --warning-color: #b45309;\n    --danger-color: #b91c1c;\n    --accent-color: #2563eb;\n    --ink: #0f172a;\n    --body: #334155;\n    --muted: #64748b;\n    --line: #e2e8f0;\n    --soft: #f8fafc;\n    max-width: 100%;\n    margin: 0 auto;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", sans-serif;\n    color: var(--body);\n    font-size: 14.5px;\n    line-height: 1.75;\n    -webkit-text-size-adjust: 100%;\n  }\n  #app *, #app *::before, #app *::after { box-sizing: border-box; }\n  #app h1, #app h2, #app h3, #app h4, #app h5, #app p, #app ul, #app ol,\n  #app li, #app label, #app table { margin: 0; padding: 0; }\n  #app ul, #app ol { list-style: none; }\n  #app li { position: relative; padding-left: 15px; }\n  #app li::before {\n    content: \"\";\n    position: absolute;\n    left: 1px;\n    top: 0.72em;\n    width: 5px;\n    height: 5px;\n    border-radius: 50%;\n    background: #94a3b8;\n  }\n  #app ul ul { margin-top: 4px; }\n  #app ul ul li { color: var(--muted); font-size: 13.5px; }\n  #app strong { font-weight: 700; color: var(--ink); }\n  #app a { color: var(--primary-d); text-decoration: none; }\n  #app em { font-style: normal; }\n\n  \/* ================= \u5916\u58f3 ================= *\/\n  #app .ps-card {\n    background: #fff;\n    border: 1px solid var(--line);\n    border-radius: 14px;\n    overflow: hidden;\n    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);\n  }\n  #app .ps-head {\n    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);\n    padding: 24px 28px;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: 14px;\n    flex-wrap: wrap;\n  }\n  #app .ps-head h1 {\n    font-size: 21px;\n    font-weight: 700;\n    color: #fff;\n    line-height: 1.35;\n    letter-spacing: 0.2px;\n  }\n  #app .ps-head p { font-size: 13.5px; color: #cbd5e1; margin-top: 6px; line-height: 1.5; }\n  #app .ps-badge {\n    font-size: 11.5px;\n    font-weight: 600;\n    letter-spacing: 0.6px;\n    color: #dbeafe;\n    background: rgba(255, 255, 255, 0.14);\n    border: 1px solid rgba(255, 255, 255, 0.22);\n    padding: 3px 10px;\n    border-radius: 999px;\n    white-space: nowrap;\n    margin-top: 2px;\n  }\n  #app .ps-body { padding: 6px 28px 20px; }\n  #app .ps-foot {\n    padding: 18px 28px;\n    border-top: 1px solid #eef2f7;\n    background: var(--soft);\n    font-size: 12.5px;\n    line-height: 1.75;\n    color: var(--muted);\n  }\n  #app .ps-foot p + p { margin-top: 6px; }\n  #app .ps-foot a { color: var(--primary-d); font-weight: 600; }\n  #app .ps-foot a:hover { text-decoration: underline; }\n\n  \/* ================= \u5206\u533a ================= *\/\n  #app .sec { padding: 22px 0; border-top: 1px solid #eef2f7; }\n  #app .sec:first-child { border-top: none; padding-top: 18px; }\n  #app .sec-title {\n    display: flex;\n    align-items: baseline;\n    gap: 9px;\n    font-size: 17px;\n    font-weight: 700;\n    color: var(--ink);\n    line-height: 1.35;\n    border-left: 3px solid var(--primary);\n    padding-left: 11px;\n    margin-bottom: 16px;\n  }\n  #app .sec-num {\n    font-size: 11.5px;\n    font-weight: 700;\n    color: var(--primary-d);\n    background: #eff6ff;\n    border: 1px solid #dbeafe;\n    border-radius: 5px;\n    padding: 1px 6px;\n    letter-spacing: 0.4px;\n  }\n  #app .grp-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--ink);\n    margin: 2px 0 10px;\n  }\n  #app .grp-title::before {\n    content: \"\";\n    width: 6px;\n    height: 6px;\n    background: var(--primary);\n    transform: rotate(45deg);\n    flex: 0 0 auto;\n  }\n\n  \/* ================= \u8868\u5355 ================= *\/\n  #app .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }\n  #app .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }\n  #app .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n  #app .field label { font-size: 13px; font-weight: 600; color: #475569; }\n  #app input[type=\"text\"], #app input[type=\"number\"], #app input[type=\"date\"],\n  #app select, #app textarea {\n    width: 100%;\n    height: 42px;\n    padding: 0 12px;\n    font-family: inherit;\n    font-size: 14px;\n    color: var(--ink);\n    background: var(--soft);\n    border: 1.5px solid #cbd5e1;\n    border-radius: 8px;\n    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;\n    -webkit-appearance: none;\n    appearance: none;\n    line-height: normal;\n  }\n  #app textarea { height: auto; padding: 10px 12px; line-height: 1.7; resize: vertical; }\n  #app input::placeholder, #app textarea::placeholder { color: #94a3b8; }\n  #app input:focus, #app select:focus, #app textarea:focus {\n    outline: none;\n    border-color: var(--primary);\n    background: #fff;\n    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);\n  }\n  #app select {\n    padding-right: 34px;\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'\/%3E%3C\/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 12px center;\n  }\n  #app input[type=\"date\"], #app input[type=\"file\"] { -webkit-appearance: auto; appearance: auto; }\n  #app input[type=\"file\"] { height: auto; padding: 8px 10px; background: #fff; font-size: 13px; color: var(--muted); }\n  #app .hint { font-size: 12.5px; color: var(--muted); line-height: 1.65; }\n\n  \/* ================= \u6309\u94ae ================= *\/\n  #app .btn, #app .btn-primary, #app .btn-secondary, #app .btn-accent,\n  #app .btn-info, #app .btn-success, #app .btn-danger, #app .btn-reset,\n  #app .correction-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    height: 42px;\n    padding: 0 18px;\n    font-family: inherit;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1;\n    white-space: nowrap;\n    border: 1px solid transparent;\n    border-radius: 8px;\n    cursor: pointer;\n    text-transform: none;\n    letter-spacing: normal;\n    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;\n  }\n  #app .btn, #app .btn-primary { background: var(--primary); color: #fff; }\n  #app .btn:hover, #app .btn-primary:hover { background: var(--primary-d); box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25); color: #fff; }\n  #app .btn-secondary, #app .btn-reset, #app .correction-btn {\n    background: #f1f5f9;\n    color: #334155;\n    border-color: #e2e8f0;\n  }\n  #app .btn-secondary:hover, #app .btn-reset:hover, #app .correction-btn:hover { background: #e8eef5; border-color: #cbd5e1; color: #0f172a; }\n  #app .btn-info { background: #eff6ff; color: var(--primary-d); border-color: #bfdbfe; }\n  #app .btn-info:hover { background: #dbeafe; border-color: #93c5fd; color: var(--primary-d); }\n  #app .btn-accent, #app .btn-success { background: #15803d; color: #fff; }\n  #app .btn-accent:hover, #app .btn-success:hover { background: #166534; color: #fff; }\n  #app .btn-danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }\n  #app .btn-danger:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }\n  #app .btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }\n  #app .buttons { display: flex; gap: 10px; flex-wrap: wrap; }\n  #app .buttons .btn,\n  #app .buttons .btn-primary,\n  #app .buttons .btn-secondary,\n  #app .buttons .btn-accent { flex: 1 1 0; min-width: 0; }\n\n  \/* ================= \u63d0\u793a\u6846 ================= *\/\n  #app .info-box, #app .warning-box, #app .danger-box, #app .success-box {\n    border-radius: 10px;\n    border: 1px solid;\n    padding: 14px 16px;\n    font-size: 13.5px;\n    line-height: 1.75;\n    margin-bottom: 14px;\n  }\n  #app .info-box { background: var(--soft); border-color: var(--line); color: var(--body); }\n  #app .warning-box { background: #fffbeb; border-color: #fde68a; color: #92400e; }\n  #app .danger-box { background: #fef2f2; border-color: #fecaca; color: #991b1b; }\n  #app .success-box { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }\n  #app .info-box p + p, #app .warning-box p + p, #app .danger-box p + p, #app .success-box p + p { margin-top: 8px; }\n  #app .info-box ul, #app .warning-box ul, #app .danger-box ul, #app .success-box ul { margin-top: 6px; }\n  #app .info-box strong, #app .warning-box strong, #app .danger-box strong, #app .success-box strong { color: inherit; }\n  #app .warning-box li::before, #app .danger-box li::before, #app .success-box li::before { background: currentColor; opacity: 0.55; }\n\n  \/* ================= \u6298\u53e0\u9762\u677f ================= *\/\n  #app .accordion { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 14px; }\n  #app .accordion-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 10px;\n    padding: 12px 14px;\n    background: var(--soft);\n    font-size: 13.5px;\n    font-weight: 600;\n    color: #334155;\n    cursor: pointer;\n    user-select: none;\n    transition: background 0.15s, color 0.15s;\n  }\n  #app .accordion-header:hover { background: #f1f5f9; }\n  #app .accordion-header.active { background: #eff6ff; color: var(--primary-d); }\n  #app .accordion-header i {\n    display: inline-block;\n    width: 8px;\n    height: 8px;\n    flex: 0 0 auto;\n    border-right: 2px solid currentColor;\n    border-bottom: 2px solid currentColor;\n    transform: rotate(45deg);\n    margin-right: 3px;\n    margin-top: -3px;\n    transition: transform 0.25s ease, margin 0.25s ease;\n  }\n  #app .accordion-header i.fa-chevron-up { transform: rotate(-135deg); margin-top: 3px; }\n  #app .accordion-content {\n    max-height: 0;\n    overflow: hidden;\n    padding: 0 14px;\n    font-size: 13.5px;\n    line-height: 1.75;\n    transition: max-height 0.28s ease;\n  }\n  #app .accordion-content.active { max-height: 4000px; padding: 14px; }\n  #app .accordion-content h4 {\n    font-size: 13.5px;\n    font-weight: 700;\n    color: var(--ink);\n    margin: 14px 0 6px;\n    padding-left: 9px;\n    border-left: 2px solid #bfdbfe;\n  }\n  #app .accordion-content h4:first-child { margin-top: 0; }\n\n  \/* ================= \u8868\u683c ================= *\/\n  #app .tbl-wrap, #app .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0 4px; }\n  #app table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 13px;\n    background: #fff;\n  }\n  #app th, #app td {\n    padding: 10px 8px;\n    text-align: center;\n    border-bottom: 1px solid #eef2f7;\n    font-variant-numeric: tabular-nums;\n    vertical-align: middle;\n  }\n  #app th {\n    background: var(--soft);\n    font-size: 12.5px;\n    font-weight: 700;\n    color: #475569;\n    border-bottom: 1px solid var(--line);\n    white-space: nowrap;\n  }\n  #app th:first-child, #app td:first-child { text-align: left; }\n  #app tbody tr:last-child td { border-bottom: none; }\n  #app tbody tr:hover td { background: #fbfdff; }\n\n  \/* ================= \u56fe\u8868 ================= *\/\n  #app .chart-container { position: relative; width: 100%; height: 300px; }\n  #app .chart-container canvas { display: block; max-width: 100%; }\n\n  \/* ================= \u7ed3\u679c\u6570\u5b57 ================= *\/\n  #app .result-card {\n    background: #fff;\n    border: 1px solid var(--line);\n    border-top: 3px solid var(--primary);\n    border-radius: 10px;\n    padding: 14px 12px;\n    text-align: center;\n  }\n  #app .result-value {\n    font-size: 23px;\n    font-weight: 700;\n    color: var(--primary-d);\n    line-height: 1.25;\n    margin: 4px 0 2px;\n    font-variant-numeric: tabular-nums;\n    letter-spacing: -0.2px;\n  }\n  #app .result-label { font-size: 12px; font-weight: 600; color: var(--muted); }\n  #app .results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }\n\n  \/* ================= \u72b6\u6001\u8272 ================= *\/\n  #app .standard-optimal, #app .green-text, #app .text-ok { color: #15803d; font-weight: 600; }\n  #app .standard-pass, #app .yellow-text, #app .text-warn { color: #b45309; font-weight: 600; }\n  #app .standard-below, #app .red-text, #app .text-bad { color: #b91c1c; font-weight: 600; }\n\n  \/* ================= \u5de5\u5177\u7c7b ================= *\/\n  #app .hidden { display: none !important; }\n  #app .mt14 { margin-top: 14px; }\n  #app .mt-20 { margin-top: 20px; }\n\n  \/* ================= \u54cd\u5e94\u5f0f ================= *\/\n  @media (min-width: 720px) {\n    #app .results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n  }\n  @media (max-width: 560px) {\n    #app .ps-head { padding: 20px 18px; }\n    #app .ps-head h1 { font-size: 18px; }\n    #app .ps-body { padding: 4px 18px 16px; }\n    #app .ps-foot { padding: 16px 18px; }\n    #app .grid-2, #app .grid-3 { grid-template-columns: 1fr; gap: 12px; }\n    #app .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }\n    #app .result-value { font-size: 20px; }\n    #app .btn-row { grid-template-columns: 1fr; }\n    #app .btn, #app .btn-primary, #app .btn-secondary, #app .btn-accent,\n    #app .btn-info, #app .btn-success, #app .btn-danger, #app .btn-reset { padding: 0 14px; font-size: 13.5px; }\n    #app table { font-size: 12.5px; }\n    #app th, #app td { padding: 9px 5px; }\n  }\n\n  \/* ---------- \u53c2\u6570\u884c ---------- *\/\n  #app .stat-row {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 10px;\n    margin-bottom: 16px;\n  }\n  #app .stat-cell {\n    background: var(--soft);\n    border: 1px solid var(--line);\n    border-radius: 10px;\n    padding: 12px 14px;\n    text-align: center;\n  }\n  #app .stat-cell .stat-label { font-size: 12px; font-weight: 600; color: var(--muted); }\n  #app .stat-cell .stat-value {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--primary-d);\n    line-height: 1.3;\n    font-variant-numeric: tabular-nums;\n    letter-spacing: -0.3px;\n  }\n  #app .stat-cell .stat-unit { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 3px; }\n\n  \/* ---------- \u5f3a\u5ea6\u6ed1\u5757 ---------- *\/\n  #app .intensity-block {\n    border: 1px solid var(--line);\n    border-radius: 10px;\n    padding: 14px 16px 16px;\n  }\n  #app .intensity-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 10px;\n    flex-wrap: wrap;\n    margin-bottom: 4px;\n  }\n  #app .intensity-head .label { font-size: 13px; font-weight: 600; color: #475569; }\n  #app .current-intensity {\n    font-size: 15px;\n    font-weight: 700;\n    color: var(--primary-d);\n    background: #eff6ff;\n    border: 1px solid #dbeafe;\n    border-radius: 7px;\n    padding: 1px 10px;\n    font-variant-numeric: tabular-nums;\n  }\n  #app input[type=\"range\"] {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 100%;\n    height: 6px;\n    margin: 14px 0 8px;\n    padding: 0;\n    border: none;\n    border-radius: 999px;\n    background: linear-gradient(to right, #bfdbfe 0%, #60a5fa 55%, #2563eb 100%);\n    outline: none;\n    cursor: pointer;\n  }\n  #app input[type=\"range\"]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background: #fff;\n    border: 3px solid var(--primary);\n    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);\n    cursor: pointer;\n  }\n  #app input[type=\"range\"]::-moz-range-thumb {\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background: #fff;\n    border: 3px solid var(--primary);\n    cursor: pointer;\n  }\n  #app .range-labels {\n    display: flex;\n    justify-content: space-between;\n    font-size: 11.5px;\n    color: var(--muted);\n    font-variant-numeric: tabular-nums;\n  }\n\n  \/* ---------- \u9884\u8bbe\u5f3a\u5ea6 ---------- *\/\n  #app .preset-grid {\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: 8px;\n    margin-top: 14px;\n  }\n  #app .preset-btn {\n    font-family: inherit;\n    font-size: 13px;\n    font-weight: 600;\n    color: #475569;\n    background: var(--soft);\n    border: 1.5px solid #cbd5e1;\n    border-radius: 8px;\n    padding: 9px 6px;\n    cursor: pointer;\n    line-height: 1.4;\n    transition: background 0.15s, border-color 0.15s, color 0.15s;\n  }\n  #app .preset-btn .pct {\n    display: block;\n    font-size: 11.5px;\n    font-weight: 600;\n    color: var(--muted);\n    font-variant-numeric: tabular-nums;\n  }\n  #app .preset-btn:hover { background: #f1f5f9; border-color: #94a3b8; }\n  #app .preset-btn.active {\n    background: #eff6ff;\n    border-color: var(--primary);\n    color: var(--primary-d);\n  }\n  #app .preset-btn.active .pct { color: var(--primary-d); opacity: 0.85; }\n\n  \/* ---------- \u76ee\u6807\u5fc3\u7387 ---------- *\/\n  #app .target-hero {\n    margin-top: 16px;\n    border: 1px solid #dbeafe;\n    background: linear-gradient(135deg, #f8fbff 0%, #eff6ff 100%);\n    border-radius: 12px;\n    padding: 16px 20px 18px;\n    text-align: center;\n  }\n  #app .target-hero .label { font-size: 12.5px; font-weight: 600; color: #475569; letter-spacing: 0.3px; }\n  #app .target-hero .hr-value {\n    font-size: 40px;\n    font-weight: 700;\n    color: var(--primary-d);\n    line-height: 1.15;\n    font-variant-numeric: tabular-nums;\n    letter-spacing: -0.5px;\n    margin-top: 2px;\n  }\n  #app .target-hero .hr-value small {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--muted);\n    margin-left: 4px;\n    letter-spacing: 0;\n  }\n  #app .target-hero .target-note { font-size: 12px; color: var(--muted); margin-top: 2px; }\n\n  \/* ---------- \u53c2\u8003\u8868 ---------- *\/\n  #app .ref-table-wrap {\n    border: 1px solid var(--line);\n    border-radius: 10px;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n  #app .ref-table { min-width: 380px; }\n  #app .ref-table th:first-child, #app .ref-table td:first-child { text-align: center; }\n  #app .ref-table .highlight-row td {\n    background: #eff6ff;\n    font-weight: 700;\n    color: var(--primary-d);\n  }\n  #app .ref-intensity { font-weight: 700; color: var(--primary-d); }\n\n  @media (max-width: 560px) {\n    #app .preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n    #app .target-hero .hr-value { font-size: 34px; }\n    #app .stat-cell .stat-value { font-size: 21px; }\n  }\n<\/style>\n<div class=\"ps-card\">\n  <div class=\"ps-head\">\n    <div>\n      <h1>\u5361\u6c0f\u516c\u5f0f \u00b7 \u8bad\u7ec3\u5f3a\u5ea6\u8ba1\u7b97\u5668<\/h1>\n      <p>\u5fc3\u7387\u50a8\u5907\u6cd5\uff08Karvonen Formula\uff09\u00b7 \u6309\u9759\u606f\u5fc3\u7387\u4e2a\u6027\u5316\u63a8\u7b97\u76ee\u6807\u5fc3\u7387<\/p>\n    <\/div>\n    <span class=\"ps-badge\">KARVONEN<\/span>\n  <\/div>\n  <div class=\"ps-body\">\n    <section class=\"sec\">\n      <h2 class=\"sec-title\"><span class=\"sec-num\">01<\/span>\u57fa\u7840\u53c2\u6570<\/h2>\n      <div class=\"grid-2\">\n        <div class=\"field\"><label for=\"age\">\u5e74\u9f84\uff08\u5c81\uff09<\/label><input type=\"number\" id=\"age\" value=\"30\" min=\"10\" max=\"100\" step=\"1\"><\/div>\n        <div class=\"field\"><label for=\"restingHr\">\u9759\u606f\u5fc3\u7387\uff08\u6b21\/\u5206\uff09<\/label><input type=\"number\" id=\"restingHr\" value=\"68\" min=\"30\" max=\"120\" step=\"1\"><\/div>\n      <\/div>\n      <p class=\"hint mt14\">\u9759\u606f\u5fc3\u7387\u5efa\u8bae\u5728\u6e05\u9192\u3001\u5b89\u9759\u5750\u4f4d\u4f11\u606f 5 \u5206\u949f\u540e\u6d4b\u91cf\uff1b\u82e5\u65e0\u6d4b\u91cf\u6761\u4ef6\uff0c\u53ef\u6309 65\u201375 \u6b21\/\u5206\u4f30\u7b97\u3002<\/p>\n    <\/section>\n    <section class=\"sec\">\n      <h2 class=\"sec-title\"><span class=\"sec-num\">02<\/span>\u8bad\u7ec3\u5f3a\u5ea6\u4e0e\u76ee\u6807\u5fc3\u7387<\/h2>\n      <div class=\"stat-row\">\n        <div class=\"stat-cell\"><div class=\"stat-label\">\u6700\u5927\u5fc3\u7387\u4f30\u7b97<\/div><div class=\"stat-value\" id=\"maxHrDisplay\">--<\/div><div class=\"stat-unit\">bpm<\/div><\/div>\n        <div class=\"stat-cell\"><div class=\"stat-label\">\u50a8\u5907\u5fc3\u7387<\/div><div class=\"stat-value\" id=\"reserveHrDisplay\">--<\/div><div class=\"stat-unit\">bpm<\/div><\/div>\n      <\/div>\n\n      <div class=\"intensity-block\">\n        <div class=\"intensity-head\">\n          <span class=\"label\" for=\"intensitySlider\">\u8fd0\u52a8\u5f3a\u5ea6\uff08\u50a8\u5907\u5fc3\u7387\u767e\u5206\u6bd4\uff09<\/span>\n          <span class=\"current-intensity\" id=\"intensityLabel\">65%<\/span>\n        <\/div>\n        <input type=\"range\" id=\"intensitySlider\" min=\"40\" max=\"95\" value=\"65\" step=\"1\">\n        <div class=\"range-labels\"><span>40% \u6062\u590d<\/span><span>95% \u9ad8\u5f3a\u5ea6<\/span><\/div>\n      <\/div>\n\n      <div class=\"preset-grid\">\n        <button class=\"preset-btn\" data-intensity=\"50\">\u6062\u590d \/ \u70ed\u8eab<span class=\"pct\">50%<\/span><\/button>\n        <button class=\"preset-btn\" data-intensity=\"65\">\u71c3\u8102<span class=\"pct\">65%<\/span><\/button>\n        <button class=\"preset-btn active\" data-intensity=\"75\">\u6709\u6c27\u63d0\u5347<span class=\"pct\">75%<\/span><\/button>\n        <button class=\"preset-btn\" data-intensity=\"85\">\u9ad8\u5f3a\u5ea6<span class=\"pct\">85%<\/span><\/button>\n      <\/div>\n\n      <div class=\"target-hero\">\n        <div class=\"label\">\u76ee\u6807\u5fc3\u7387<\/div>\n        <div class=\"hr-value\" id=\"targetHrDisplay\">-- <small>bpm<\/small><\/div>\n        <div class=\"target-note\">\uff08\u6700\u5927\u5fc3\u7387 \u2212 \u9759\u606f\u5fc3\u7387\uff09\u00d7 \u5f3a\u5ea6% \uff0b \u9759\u606f\u5fc3\u7387<\/div>\n      <\/div>\n    <\/section>\n    <section class=\"sec\">\n      <h2 class=\"sec-title\"><span class=\"sec-num\">03<\/span>\u5f3a\u5ea6\u533a\u95f4\u53c2\u8003\u8868<\/h2>\n      <div class=\"ref-table-wrap\">\n        <table class=\"ref-table\">\n          <thead><tr><th>\u5f3a\u5ea6<\/th><th>\u76ee\u6807\u5fc3\u7387\uff08bpm\uff09<\/th><th>\u8bad\u7ec3\u76ee\u7684<\/th><\/tr><\/thead>\n          <tbody id=\"tableBody\"><\/tbody>\n        <\/table>\n      <\/div>\n      <p class=\"hint mt14\">\u8868\u4e2d\u6570\u503c\u6309\u5f53\u524d\u5e74\u9f84\u4e0e\u9759\u606f\u5fc3\u7387\u5b9e\u65f6\u6362\u7b97\uff1b\u540c\u4e00\u5f3a\u5ea6\u4e0b\u9759\u606f\u5fc3\u7387\u8d8a\u4f4e\uff0c\u76ee\u6807\u5fc3\u7387\u533a\u95f4\u8d8a\u4f4e\u3002<\/p>\n    <\/section>\n  <\/div>\n  <div class=\"ps-foot\">\n    <p>\u516c\u5f0f\uff1a\u76ee\u6807\u5fc3\u7387 =\uff08\u6700\u5927\u5fc3\u7387 \u2212 \u9759\u606f\u5fc3\u7387\uff09\u00d7 \u5f3a\u5ea6% \uff0b \u9759\u606f\u5fc3\u7387\uff1b\u6700\u5927\u5fc3\u7387 = 220 \u2212 \u5e74\u9f84\u3002<\/p>\n    <p>\u672c\u5de5\u5177\u4ec5\u4f5c\u8fd0\u52a8\u5f3a\u5ea6\u53c2\u8003\uff0c\u4e0d\u80fd\u66ff\u4ee3\u5fc3\u80ba\u8fd0\u52a8\u8bd5\u9a8c\uff08CPET\uff09\u7b49\u4e13\u4e1a\u8bc4\u4f30\u3002\u670d\u7528\u5f71\u54cd\u5fc3\u7387\u836f\u7269\uff08\u5982 \u03b2 \u53d7\u4f53\u963b\u6ede\u5242\uff09\u8005\uff0c\u8bf7\u4ee5\u533b\u751f\u5efa\u8bae\u4e3a\u51c6\u3002<\/p>\n    <p>\u8fd0\u52a8\u524d\u8bf7\u54a8\u8be2\u533b\u751f\uff0c\u8fc7\u7a0b\u4e2d\u5982\u6709\u80f8\u95f7\u3001\u5934\u6655\u3001\u5fc3\u60b8\u7b49\u4e0d\u9002\u7acb\u5373\u505c\u6b62\u3002<\/p>\n  <\/div>\n<\/div>\n<script>(function() {\n            \/\/ DOM \u5143\u7d20\n            const ageInput = document.getElementById('age');\n            const restingInput = document.getElementById('restingHr');\n            const intensitySlider = document.getElementById('intensitySlider');\n            const intensityLabel = document.getElementById('intensityLabel');\n            const maxHrDisplay = document.getElementById('maxHrDisplay');\n            const reserveHrDisplay = document.getElementById('reserveHrDisplay');\n            const targetHrDisplay = document.getElementById('targetHrDisplay');\n            const tableBody = document.getElementById('tableBody');\n            const presetBtns = document.querySelectorAll('#app .preset-btn');\n            \/\/ \u5de5\u5177\uff1a\u8ba1\u7b97\n            function compute(age, resting, intensity) {\n                const maxHr = 220 - age;\n                const reserve = maxHr - resting;\n                const target = Math.round(reserve * (intensity \/ 100) + resting);\n                return { maxHr, reserve, target };\n            }\n            \/\/ \u66f4\u65b0\u6240\u6709\u663e\u793a\n            function updateAll() {\n                const age = parseInt(ageInput.value) || 30;\n                const resting = parseInt(restingInput.value) || 68;\n                let intensity = parseInt(intensitySlider.value) || 65;\n                \/\/ \u786e\u4fdd\u5f3a\u5ea6\u5728\u6709\u6548\u8303\u56f4\n                intensity = Math.min(95, Math.max(40, intensity));\n                \/\/ \u66f4\u65b0\u6ed1\u5757\u503c\uff08\u9632\u6b62\u8d85\u51fa\uff09\n                if (parseInt(intensitySlider.value) !== intensity) {\n                    intensitySlider.value = intensity;\n                }\n                intensityLabel.textContent = intensity + '%';\n                \/\/ \u8ba1\u7b97\n                const { maxHr, reserve, target } = compute(age, resting, intensity);\n                \/\/ \u663e\u793a\u7edf\u8ba1\n                maxHrDisplay.textContent = maxHr;\n                reserveHrDisplay.textContent = reserve;\n                \/\/ \u663e\u793a\u76ee\u6807\u5fc3\u7387\n                targetHrDisplay.innerHTML = target + ' <small>bpm<\/small>';\n                \/\/ \u66f4\u65b0\u8868\u683c\n                updateTable(age, resting);\n                \/\/ \u9ad8\u4eae\u5bf9\u5e94\u7684\u9884\u8bbe\u6309\u94ae\uff08\u57fa\u4e8e\u5f53\u524d\u5f3a\u5ea6\uff09\n                highlightPreset(intensity);\n            }\n            \/\/ \u66f4\u65b0\u53c2\u8003\u8868\u683c\uff08\u663e\u793a\u5e38\u7528\u5f3a\u5ea6\u5bf9\u5e94\u5fc3\u7387\uff09\n            function updateTable(age, resting) {\n                const intensities = [50, 60, 70, 80, 90];\n                const labels = ['\u6062\u590d\/\u70ed\u8eab', '\u71c3\u8102', '\u6709\u6c27\u63d0\u5347', '\u9ad8\u5f3a\u5ea6', '\u6781\u9650'];\n                let html = '';\n                const currentIntensity = parseInt(intensitySlider.value) || 65;\n                intensities.forEach((int, idx) => {\n                    const { target } = compute(age, resting, int);\n                    let nearest = 0;\n                    intensities.forEach((v, i) => {\n                        if (Math.abs(v - currentIntensity) < Math.abs(intensities[nearest] - currentIntensity)) nearest = i;\n                    });\n                    const isHighlight = idx === nearest;\n                    const rowClass = isHighlight ? 'highlight-row' : '';\n                    html += `<tr class=\"${rowClass}\">\n                        <td><span class=\"ref-intensity\">${int}%<\/span><\/td>\n                        <td class=\"ref-hr\">${target}<\/td>\n                        <td>${labels[idx]}<\/td>\n                    <\/tr>`;\n                });\n                tableBody.innerHTML = html;\n            }\n            \/\/ \u9ad8\u4eae\u9884\u8bbe\u6309\u94ae\n            function highlightPreset(intensity) {\n                presetBtns.forEach(btn => {\n                    const val = parseInt(btn.dataset.intensity);\n                    \/\/ \u5982\u679c\u6309\u94ae\u5f3a\u5ea6\u4e0e\u5f53\u524d\u5f3a\u5ea6\u63a5\u8fd1\uff08\u00b13%\uff09\uff0c\u8bbe\u4e3aactive\n                    const active = Math.abs(val - intensity) <= 3;\n                    btn.classList.toggle('active', active);\n                });\n            }\n            \/\/ \u9884\u8bbe\u6309\u94ae\u70b9\u51fb\n            presetBtns.forEach(btn => {\n                btn.addEventListener('click', function(e) {\n                    const val = parseInt(this.dataset.intensity);\n                    intensitySlider.value = val;\n                    updateAll();\n                });\n            });\n            \/\/ \u8f93\u5165\u4e8b\u4ef6\u76d1\u542c\n            ageInput.addEventListener('input', updateAll);\n            restingInput.addEventListener('input', updateAll);\n            intensitySlider.addEventListener('input', updateAll);\n            \/\/ \u989d\u5916\uff1a\u8f93\u5165\u8303\u56f4\u7ea6\u675f\n            ageInput.addEventListener('blur', function() {\n                let v = parseInt(this.value);\n                if (isNaN(v)) v = 30;\n                v = Math.min(100, Math.max(10, v));\n                this.value = v;\n                updateAll();\n            });\n            restingInput.addEventListener('blur', function() {\n                let v = parseInt(this.value);\n                if (isNaN(v)) v = 68;\n                v = Math.min(120, Math.max(30, v));\n                this.value = v;\n                updateAll();\n            });\n            \/\/ \u521d\u59cb\u5316\n            updateAll();\n        })();<\/script>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u5361\u6c0f\u516c\u5f0f \u00b7 \u8bad\u7ec3\u5f3a\u5ea6\u8ba1\u7b97\u5668 \u2764\ufe0f \u5361\u6c0f\u516c\u5f0f \u5fc3\u7387\u50a8\u5907\u6cd5 \u57fa\u4e8e\u9759\u606f\u5fc3\u7387\u4e0e\u6700\u5927\u5fc3\u7387\uff0c\u7cbe\u51c6\u8ba1\u7b97\u4e2a\u6027\u5316\u8bad\u7ec3\u5f3a\u5ea6 \u5e74\u9f84 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2070,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2077","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/pages\/2077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2077"}],"version-history":[{"count":6,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/pages\/2077\/revisions"}],"predecessor-version":[{"id":2167,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/pages\/2077\/revisions\/2167"}],"up":[{"embeddable":true,"href":"https:\/\/www.funpt.cn\/index.php?rest_route=\/wp\/v2\/pages\/2070"}],"wp:attachment":[{"href":"https:\/\/www.funpt.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}