\u865a\u5c81\u5468\u5c81\u8ba1\u7b97\u5668<\/title>\r\n <style>\r\n \r\n .age-calc-box {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n background: #ffffff;\r\n border-radius: 2rem;\r\n padding: 2rem;\r\n box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);\r\n font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\r\n }\r\n .age-calc-field {\r\n margin-bottom: 2rem;\r\n }\r\n .age-calc-label {\r\n display: block;\r\n font-weight: 600;\r\n margin-bottom: 0.5rem;\r\n color: #1f2937;\r\n font-size: 1rem;\r\n }\r\n .age-calc-input {\r\n width: 100%;\r\n padding: 0.8rem 1rem;\r\n border: 1px solid #d1d5db;\r\n border-radius: 1.5rem;\r\n font-size: 1rem;\r\n transition: 0.2s;\r\n }\r\n .age-calc-input:focus {\r\n outline: none;\r\n border-color: #3b82f6;\r\n box-shadow: 0 0 0 2px #bfdbfe;\r\n }\r\n .age-calc-results {\r\n display: flex;\r\n gap: 1.5rem;\r\n flex-wrap: wrap;\r\n margin: 2rem 0 1.5rem;\r\n }\r\n .age-calc-card {\r\n flex: 1;\r\n background: #fef9e8;\r\n border-radius: 1.5rem;\r\n padding: 1.2rem;\r\n text-align: center;\r\n }\r\n .age-calc-card:first-child {\r\n background: #eef2ff;\r\n }\r\n .age-calc-number {\r\n font-size: 3rem;\r\n font-weight: 800;\r\n line-height: 1.2;\r\n }\r\n .age-calc-unit {\r\n font-size: 1.2rem;\r\n font-weight: 500;\r\n margin-left: 0.2rem;\r\n }\r\n .age-calc-sub {\r\n font-size: 0.75rem;\r\n color: #4b5563;\r\n margin-top: 0.5rem;\r\n }\r\n .age-calc-extra {\r\n background: #f9fafb;\r\n border-radius: 2rem;\r\n padding: 0.8rem;\r\n text-align: center;\r\n margin-top: 1rem;\r\n }\r\n .age-calc-error {\r\n color: #b91c1c;\r\n background: #fee2e2;\r\n border-radius: 2rem;\r\n padding: 0.6rem;\r\n margin-top: 1rem;\r\n text-align: center;\r\n display: none;\r\n }\r\n .loading-spinner {\r\n display: inline-block;\r\n width: 1rem;\r\n height: 1rem;\r\n border: 2px solid #e2e8f0;\r\n border-top-color: #3b82f6;\r\n border-radius: 50%;\r\n animation: spin 0.6s linear infinite;\r\n margin-left: 0.5rem;\r\n vertical-align: middle;\r\n }\r\n @keyframes spin {\r\n to { transform: rotate(360deg); }\r\n }\r\n @media (max-width: 600px) {\r\n .age-calc-number { font-size: 2.2rem; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"age-calc-box\">\r\n <div class=\"age-calc-field\">\r\n <label class=\"age-calc-label\">\ud83c\udf82 \u51fa\u751f\u5e74\u6708\u65e5<\/label>\r\n <input type=\"date\" id=\"birth_input\" class=\"age-calc-input\" value=\"1997-11-08\">\r\n <\/div>\r\n\r\n <div class=\"age-calc-results\">\r\n <div class=\"age-calc-card\">\r\n <div style=\"font-weight:600;\">\ud83e\udde7 \u865a\u5c81\u5e74\u9f84<\/div>\r\n <div class=\"age-calc-number\">\r\n <span id=\"nominal_display\">--<\/span><span class=\"age-calc-unit\">\u5c81<\/span>\r\n <\/div>\r\n <div class=\"age-calc-sub\">\u51fa\u751f\u53731\u5c81 \u00b7 \u5e74\u4efd\u7d2f\u52a0<\/div>\r\n <\/div>\r\n <div class=\"age-calc-card\">\r\n <div style=\"font-weight:600;\">\ud83c\udf88 \u5468\u5c81\u5e74\u9f84<\/div>\r\n <div class=\"age-calc-number\">\r\n <span id=\"actual_display\">--<\/span><span class=\"age-calc-unit\">\u5c81<\/span>\r\n <\/div>\r\n <div class=\"age-calc-sub\">\u6ee1\u5468\u5c81 +1\u5c81 \u00b7 \u7cbe\u786e\u751f\u65e5<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"age-calc-extra\">\r\n <span>\u2728 \u8ddd\u79bb\u4e0b\u4e00\u4e2a\u751f\u65e5\uff1a<\/span>\r\n <strong id=\"countdown_display\">-- \u5929<\/strong>\r\n <\/div>\r\n <div id=\"error_message\" class=\"age-calc-error\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n \r\n const ajaxUrl = '\/wp-admin\/admin-ajax.php'; \r\n \r\n \r\n const birthInput = document.getElementById('birth_input');\r\n const nominalSpan = document.getElementById('nominal_display');\r\n const actualSpan = document.getElementById('actual_display');\r\n const countdownSpan = document.getElementById('countdown_display');\r\n const errorDiv = document.getElementById('error_message');\r\n\r\n \r\n function getTodayString() {\r\n const today = new Date();\r\n const yyyy = today.getFullYear();\r\n const mm = String(today.getMonth() + 1).padStart(2, '0');\r\n const dd = String(today.getDate()).padStart(2, '0');\r\n return `${yyyy}-${mm}-${dd}`;\r\n }\r\n\r\n \r\n function showError(msg) {\r\n errorDiv.textContent = msg;\r\n errorDiv.style.display = 'block';\r\n nominalSpan.textContent = '?';\r\n actualSpan.textContent = '?';\r\n countdownSpan.textContent = '-- \u5929';\r\n }\r\n\r\n function hideError() {\r\n errorDiv.style.display = 'none';\r\n }\r\n\r\n \r\n function setLoading(isLoading) {\r\n if (isLoading) {\r\n nominalSpan.innerHTML = '<span class=\"loading-spinner\"><\/span>';\r\n actualSpan.innerHTML = '<span class=\"loading-spinner\"><\/span>';\r\n countdownSpan.innerHTML = '<span class=\"loading-spinner\"><\/span>';\r\n } else {\r\n \r\n nominalSpan.innerHTML = '--';\r\n actualSpan.innerHTML = '--';\r\n countdownSpan.innerHTML = '-- \u5929';\r\n }\r\n }\r\n\r\n \r\n function calculateAge() {\r\n const birth = birthInput.value;\r\n if (!birth) {\r\n showError('\u8bf7\u586b\u5199\u51fa\u751f\u5e74\u6708\u65e5');\r\n return;\r\n }\r\n\r\n const today = getTodayString(); \r\n hideError();\r\n setLoading(true);\r\n\r\n const formData = new FormData();\r\n formData.append('action', 'calculate_age');\r\n formData.append('today', today);\r\n formData.append('birth', birth);\r\n\r\n fetch(ajaxUrl, {\r\n method: 'POST',\r\n credentials: 'same-origin',\r\n body: formData\r\n })\r\n .then(response => response.json())\r\n .then(data => {\r\n setLoading(false);\r\n if (data.success) {\r\n nominalSpan.textContent = data.data.nominal_age;\r\n actualSpan.textContent = data.data.actual_age;\r\n if (data.data.days_to_birth === 0) {\r\n countdownSpan.innerHTML = '\ud83c\udf89 \u4eca\u5929\u751f\u65e5 \ud83c\udf89';\r\n } else {\r\n countdownSpan.innerHTML = data.data.days_to_birth + ' \u5929';\r\n }\r\n } else {\r\n showError(data.data.message || '\u8ba1\u7b97\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u91cd\u8bd5');\r\n }\r\n })\r\n .catch(error => {\r\n setLoading(false);\r\n showError('\u7f51\u7edc\u9519\u8bef\uff0c\u65e0\u6cd5\u8fde\u63a5\u670d\u52a1\u5668');\r\n console.error('AJAX Error:', error);\r\n });\r\n }\r\n\r\n \r\n birthInput.addEventListener('input', calculateAge);\r\n birthInput.addEventListener('change', calculateAge);\r\n\r\n \r\n window.addEventListener('DOMContentLoaded', calculateAge);\r\n if (document.readyState !== 'loading') {\r\n calculateAge();\r\n } else {\r\n document.addEventListener('DOMContentLoaded', calculateAge);\r\n }\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>\u865a\u5c81\/ \u5468\u5c81\u8ba1\u7b97 \u865a\u5c81\u5468\u5c81\u8ba1\u7b97\u5668 \ud83c\udf82 \u51fa\u751f\u5e74\u6708\u65e5 \ud83e\udde7 \u865a\u5c81\u5e74\u9f84 –\u5c81 \u51fa\u751f\u53731\u5c81 \u00b7 \u5e74\u4efd\u7d2f\u52a0 \ud83c\udf88 \u5468\u5c81\u5e74\u9f84 –\u5c81 \u6ee1\u5468\u5c81 +1\u5c81 \u00b7 \u7cbe\u786e\u751f\u65e5 \u2728 \u8ddd\u79bb\u4e0b\u4e00\u4e2a\u751f\u65e5\uff1a — \u5929<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":19,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-986","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/986","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=986"}],"version-history":[{"count":58,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/986\/revisions"}],"predecessor-version":[{"id":1117,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/986\/revisions\/1117"}],"up":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/19"}],"wp:attachment":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}