\u8dd1\u6b65\u901f\u5ea6\u8ba1\u7b97\u5668<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: #ffffff;\n min-height: 100vh;\n padding: 20px 10px;\n }\n \n .calculator-container {\n max-width: 1200px;\n margin: 0 auto;\n background: rgba(255, 255, 255, 0.95);\n border-radius: 20px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n backdrop-filter: blur(10px);\n }\n \n .header {\n background: linear-gradient(45deg, #F0605C, #E5544F);\n color: white;\n text-align: center;\n padding: 20px;\n }\n \n .header h1 {\n font-size: 2rem;\n margin: 0;\n font-weight: 300;\n }\n \n .content {\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 0;\n min-height: 600px;\n }\n \n .controls {\n padding: 40px 30px;\n background: #f8f9fa;\n border-right: 1px solid #e9ecef;\n }\n \n .control-group {\n margin-bottom: 35px;\n }\n \n .control-group label {\n display: block;\n font-weight: 600;\n color: #F0605C;\n margin-bottom: 15px;\n font-size: 1.1rem;\n }\n \n .time-inputs {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 15px;\n margin-bottom: 20px;\n }\n \n .input-group {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n \n .input-group label {\n font-size: 0.9rem;\n color: #6c757d;\n margin-bottom: 8px;\n font-weight: 500;\n }\n \n .time-input {\n width: 100%;\n padding: 12px;\n border: 2px solid #e9ecef;\n border-radius: 10px;\n font-size: 1.2rem;\n text-align: center;\n font-weight: 600;\n transition: all 0.3s ease;\n }\n \n .time-input:focus {\n outline: none;\n border-color: #F0605C;\n box-shadow: 0 0 0 3px rgba(240, 96, 92, 0.1);\n }\n \n .unit-toggle {\n display: flex;\n background: #e9ecef;\n border-radius: 12px;\n padding: 4px;\n position: relative;\n }\n \n .unit-option {\n flex: 1;\n padding: 12px 20px;\n text-align: center;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n border-radius: 8px;\n position: relative;\n z-index: 2;\n }\n \n .unit-option.active {\n background: white;\n color: #F0605C;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n }\n \n .calculate-btn {\n width: 100%;\n padding: 15px;\n background: linear-gradient(45deg, #F0605C, #E5544F);\n color: white;\n border: none;\n border-radius: 12px;\n font-size: 1.1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n margin-top: 20px;\n }\n \n .calculate-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 20px rgba(240, 96, 92, 0.4);\n }\n \n .results {\n padding: 40px 30px;\n overflow-y: auto;\n max-height: 700px;\n }\n \n .results h3 {\n color: #F0605C;\n margin-bottom: 25px;\n font-size: 1.3rem;\n text-align: center;\n }\n \n .results-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 0.9rem;\n background: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\n }\n \n .results-table th {\n background: linear-gradient(45deg, #F0605C, #E5544F);\n color: white;\n padding: 15px 12px;\n font-weight: 600;\n text-align: center;\n font-size: 0.85rem;\n }\n \n .results-table td {\n padding: 12px;\n text-align: center;\n border-bottom: 1px solid #f0f0f0;\n font-weight: 500;\n }\n \n .results-table tr:nth-child(even) {\n background-color: #f8f9fa;\n }\n \n .results-table tr:hover {\n background-color: rgba(240, 96, 92, 0.1);\n }\n \n .distance-label {\n font-weight: 600;\n color: #F0605C;\n }\n \n .highlight-row {\n background-color: rgba(240, 96, 92, 0.1) !important;\n }\n \n .highlight-row:hover {\n background-color: rgba(240, 96, 92, 0.2) !important;\n }\n \n @media (max-width: 768px) {\n .content {\n grid-template-columns: 1fr;\n }\n \n .controls {\n border-right: none;\n border-bottom: 1px solid #e9ecef;\n }\n \n .header h1 {\n font-size: 1.5rem;\n }\n \n .results-table {\n font-size: 0.8rem;\n }\n \n .results-table th,\n .results-table td {\n padding: 8px 6px;\n }\n \n .time-inputs {\n grid-template-columns: 1fr;\n gap: 10px;\n }\n \n .controls, .results {\n padding: 25px 20px;\n }\n }\n \n @media (max-width: 480px) {\n .results-table th,\n .results-table td {\n padding: 6px 4px;\n font-size: 0.75rem;\n }\n \n body {\n padding: 10px 5px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"calculator-container\">\n <div class=\"content\">\n <div class=\"controls\">\n <div class=\"control-group\">\n <label>\u9884\u671f\u901f\u5ea6<\/label>\n <div class=\"time-inputs\">\n <div class=\"input-group\">\n <label>\u5206\u949f<\/label>\n <input type=\"number\" id=\"minutes\" class=\"time-input\" value=\"5\" min=\"0\" max=\"30\">\n <\/div>\n <div class=\"input-group\">\n <label>\u79d2\u6570<\/label>\n <input type=\"number\" id=\"seconds\" class=\"time-input\" value=\"0\" min=\"0\" max=\"59\">\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"control-group\">\n <label>\u5355\u4f4d<\/label>\n <div class=\"unit-toggle\">\n <div class=\"unit-option active\" data-unit=\"km\">\u5206\u949f\/\u516c\u91cc<\/div>\n <div class=\"unit-option\" data-unit=\"mi\">\u5206\u949f\/\u7c73<\/div>\n <\/div>\n <\/div>\n \n <button class=\"calculate-btn\" onclick=\"calculatePaces()\">\n \u8ba1\u7b97\u5b8c\u6210\u65f6\u95f4\n <\/button>\n <\/div>\n \n <div class=\"results\">\n <h3>\u9884\u8ba1\u5b8c\u6210\u65f6\u95f4<\/h3>\n <table class=\"results-table\" id=\"resultsTable\">\n <thead>\n <tr>\n <th>\u8ddd\u79bb<\/th>\n <th>4:30\/pace<\/th>\n <th>5:00\/pace<\/th>\n <th>5:30\/pace<\/th>\n <th>6:00\/pace<\/th>\n <th>6:30\/pace<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"resultsBody\">\n \n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const distances = [\n { label: '1 km', km: 1, mi: 0.62 },\n { label: '1 mi', km: 1.61, mi: 1 },\n { label: '2 km', km: 2, mi: 1.24 },\n { label: '2 mi', km: 3.22, mi: 2 },\n { label: '3 km', km: 3, mi: 1.86 },\n { label: '3 mi', km: 4.83, mi: 3 },\n { label: '5K', km: 5, mi: 3.11 },\n { label: '4 mi', km: 6.44, mi: 4 },\n { label: '5 mi', km: 8.05, mi: 5 },\n { label: '6 mi', km: 9.66, mi: 6 },\n { label: '10K', km: 10, mi: 6.21 },\n { label: '7 mi', km: 11.27, mi: 7 },\n { label: '8 mi', km: 12.87, mi: 8 },\n { label: '9 mi', km: 14.48, mi: 9 },\n { label: '10 mi', km: 16.09, mi: 10 },\n { label: '15K', km: 15, mi: 9.32 },\n { label: 'Half Marathon', km: 21.1, mi: 13.1 },\n { label: '20K', km: 20, mi: 12.43 },\n { label: '15 mi', km: 24.14, mi: 15 },\n { label: '25K', km: 25, mi: 15.53 },\n { label: '20 mi', km: 32.19, mi: 20 },\n { label: '30K', km: 30, mi: 18.64 },\n { label: 'Marathon', km: 42.2, mi: 26.2 },\n { label: '50K', km: 50, mi: 31.07 }\n ];\n\n const paceOptions = [\n { min: 4, sec: 30 },\n { min: 5, sec: 0 },\n { min: 5, sec: 30 },\n { min: 6, sec: 0 },\n { min: 6, sec: 30 }\n ];\n\n let currentUnit = 'km';\n\n \/\/ Unit toggle functionality\n document.querySelectorAll('.unit-option').forEach(option => {\n option.addEventListener('click', function() {\n document.querySelectorAll('.unit-option').forEach(opt => opt.classList.remove('active'));\n this.classList.add('active');\n currentUnit = this.dataset.unit;\n calculatePaces();\n });\n });\n\n \/\/ Auto-calculate on input change with proper event handling\n document.getElementById('minutes').addEventListener('input', function() {\n setTimeout(calculatePaces, 100);\n });\n document.getElementById('seconds').addEventListener('input', function() {\n setTimeout(calculatePaces, 100);\n });\n document.getElementById('minutes').addEventListener('change', calculatePaces);\n document.getElementById('seconds').addEventListener('change', calculatePaces);\n\n function formatTime(totalSeconds) {\n const hours = Math.floor(totalSeconds \/ 3600);\n const minutes = Math.floor((totalSeconds % 3600) \/ 60);\n const seconds = Math.round(totalSeconds % 60);\n \n if (hours > 0) {\n return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n } else {\n return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n }\n }\n\n function calculateFinishTime(distance, paceMinutes, paceSeconds, unit) {\n const paceInSeconds = paceMinutes * 60 + paceSeconds;\n const distanceValue = unit === 'km' ? distance.km : distance.mi;\n return paceInSeconds * distanceValue;\n }\n\n function calculatePaces() {\n const minutes = parseInt(document.getElementById('minutes').value) || 0;\n const seconds = parseInt(document.getElementById('seconds').value) || 0;\n \n \/\/ Update table headers\n const headerRow = document.querySelector('#resultsTable thead tr');\n headerRow.innerHTML = `\n <th>Distance<\/th>\n ${paceOptions.map(pace => \n `<th>${pace.min}:${pace.sec.toString().padStart(2, '0')}\/${currentUnit}<\/th>`\n ).join('')}\n <th style=\"background: linear-gradient(45deg, #F0605C, #E5544F); font-weight: 700;\">\n ${minutes}:${seconds.toString().padStart(2, '0')}\/${currentUnit}\n <\/th>\n `;\n\n const tbody = document.getElementById('resultsBody');\n tbody.innerHTML = '';\n\n distances.forEach(distance => {\n const row = document.createElement('tr');\n \n let cells = `<td class=\"distance-label\">${distance.label}<\/td>`;\n \n \/\/ Calculate times for preset paces\n paceOptions.forEach(pace => {\n const finishTime = calculateFinishTime(distance, pace.min, pace.sec, currentUnit);\n cells += `<td>${formatTime(finishTime)}<\/td>`;\n });\n \n \/\/ Calculate time for user's pace (highlighted column)\n const userFinishTime = calculateFinishTime(distance, minutes, seconds, currentUnit);\n cells += `<td style=\"background: linear-gradient(45deg, #F0605C, #E5544F); color: white; font-weight: 700;\">${formatTime(userFinishTime)}<\/td>`;\n \n row.innerHTML = cells;\n \n \/\/ Highlight popular distances\n if (['5K', '10K', 'Half Marathon', 'Marathon'].includes(distance.label)) {\n row.classList.add('highlight-row');\n }\n \n tbody.appendChild(row);\n });\n }\n\n \/\/ Initialize with default calculation\n calculatePaces();\n <\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t<\/div>\n\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n\n\t<div class=\"vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>\n\t\t<div id=\"fws_69e0728bc7a63\" data-column-margin=\"default\" data-midnight=\"dark\" class=\"wpb_row vc_row-fluid vc_row\" style=\"padding-top: 0px; padding-bottom: 0px; \"><div class=\"row-bg-wrap\" data-bg-animation=\"none\" data-bg-animation-delay=\"\" data-bg-overlay=\"false\"><div class=\"inner-wrap row-bg-layer\" ><div class=\"row-bg viewport-desktop\" style=\"\"><\/div><\/div><\/div><div class=\"row_col_wrap_12 col span_12 dark left\">\n\t<div class=\"vc_col-sm-6 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<div class=\"nectar-split-heading\" data-align=\"default\" data-m-align=\"inherit\" data-text-effect=\"default\" data-animation-type=\"line-reveal-by-space\" data-animation-delay=\"0\" data-animation-offset=\"\" data-m-rm-animation=\"\" data-stagger=\"\" data-custom-font-size=\"false\" ><h1 >\u4e0e Duolingo \u76f8\u4f3c\uff0c\u4f46\u9002\u7528\u4e8e\u5065\u8eab<\/h1><\/div>\n<div class=\"wpb_text_column wpb_content_element\" >\n\t<div class=\"wpb_wrapper\">\n\t\t<p>Fito \u662f\u4e00\u6b3e\u6e38\u620f\u5316\u7684\u8dd1\u6b65\u8bb0\u5f55 app\uff0c\u5c31\u50cf <a href=\"https:\/\/www.duolingo.com\/\" rel=\"noopener\">\u591a\u90bb\u56fd<\/a> \u4f46\u8fd0\u52a8\u7248\u3002\u5b83\u6709\u4e00\u53ea\u53ef\u7231\u7684\u5c0f\u718a\uff0c\u966a\u4f34\u4f60\u953b\u70bc\u3002 <a href=\"https:\/\/getfitoapp.com\/zh\/%e5%b7%a5%e5%85%b7\/%e5%81%a5%e8%ba%ab%e6%9d%a1%e7%ba%b9%e5%b0%8f%e9%83%a8%e4%bb%b6%e5%92%8c%e6%89%8b%e8%a1%a8%e8%a1%a8%e9%9d%a2\/\">\u684c\u9762\u5c0f\u7ec4\u4ef6<\/a>\u4e3a\u4f60\u7684\u957f\u671f\u8dd1\u6b65\u6ce8\u5165\u52a8\u529b\u3002<\/p>\n\t<\/div>\n<\/div>\n\n\n\n<div class=\"nectar-cta text_hover_color_FFFFFF alignment_tablet_default alignment_phone_default display_tablet_inherit display_phone_inherit\" data-color=\"accent-color\" data-using-bg=\"true\" data-style=\"basic\" data-display=\"block\" data-alignment=\"left\" data-text-color=\"custom\" ><h3 style=\"color: #FFFFFF;\"><span class=\"link_wrap\" style=\"padding-top: 15px; padding-right: 30px; padding-bottom: 15px; padding-left: 30px;\"><a class=\"link_text\" role=\"button\" href=\"https:\/\/getfitoapp.com\/zh\/\"><span class=\"text\">\u7acb\u5373\u8bd5\u7528<\/span><\/a><\/span><\/h3><\/div>\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n\n\t<div class=\"vc_col-sm-6 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<div class=\"img-with-aniamtion-wrap\" data-max-width=\"100%\" data-max-width-mobile=\"default\" data-shadow=\"none\" data-animation=\"none\" >\n <div class=\"inner\">\n <div class=\"hover-wrap\"> \n <div class=\"hover-wrap-inner\">\n <img loading=\"lazy\" decoding=\"async\" class=\"img-with-animation skip-lazy\" data-delay=\"0\" height=\"1525\" width=\"2560\" data-animation=\"none\" src=\"https:\/\/getfitoapp.com\/wp-content\/uploads\/2025\/08\/streak-scaled.jpg\" alt=\"\u8fde\u80dc\u6982\u89c8\uff0c\u5305\u62ec\u8fde\u80dc\u65f6\u95f4\u8868\u3001\u6bcf\u6708\u8ddd\u79bb\u548c\u5409\u7965\u7269\u63d0\u9192\" srcset=\"https:\/\/getfitoapp.com\/wp-content\/uploads\/2025\/08\/streak-scaled.jpg 2560w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2025\/08\/streak-300x179.jpg 300w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2025\/08\/streak-1024x610.jpg 1024w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2025\/08\/streak-768x458.jpg 768w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2025\/08\/streak-1536x915.jpg 1536w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2025\/08\/streak-2048x1220.jpg 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>","protected":false},"excerpt":{"rendered":"\u8dd1\u6b65\u914d\u901f\u8ba1\u7b97\u5668\u548c\u56fe\u8868 5K\u300110K\u300110 \u82f1\u91cc\u3001\u534a\u7a0b\u9a6c\u62c9\u677e\u3001\u9a6c\u62c9\u677e\u548c 50K \u8dd1\u6b65\u914d\u901f\u8ba1\u7b97\u5668 \u9884\u8ba1\u914d\u901f \u5206\u949f \u79d2 \u5355\u4f4d min\/km min\/mi \u8ba1\u7b97\u5b8c\u6210\u65f6\u95f4 \u9884\u8ba1\u5b8c\u6210\u65f6\u95f4...","protected":false},"author":1,"featured_media":0,"parent":6528,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"tags":[39],"class_list":{"0":"post-6558","1":"page","2":"type-page","3":"status-publish","5":"tag-tools"},"_links":{"self":[{"href":"https:\/\/getfitoapp.com\/zh\/wp-json\/wp\/v2\/pages\/6558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getfitoapp.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/getfitoapp.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/zh\/wp-json\/wp\/v2\/comments?post=6558"}],"version-history":[{"count":0,"href":"https:\/\/getfitoapp.com\/zh\/wp-json\/wp\/v2\/pages\/6558\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/zh\/wp-json\/wp\/v2\/pages\/6528"}],"wp:attachment":[{"href":"https:\/\/getfitoapp.com\/zh\/wp-json\/wp\/v2\/media?parent=6558"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getfitoapp.com\/zh\/wp-json\/wp\/v2\/tags?post=6558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}