{"id":5221,"date":"2025-04-01T10:30:19","date_gmt":"2025-04-01T02:30:19","guid":{"rendered":"https:\/\/liyue.name\/blog\/?p=5221"},"modified":"2025-04-01T10:30:19","modified_gmt":"2025-04-01T02:30:19","slug":"bmi-calculator","status":"publish","type":"post","link":"https:\/\/liyue.name\/?p=5221","title":{"rendered":"BMI \u8ba1\u7b97\u5668"},"content":{"rendered":"\n<p>\u586b\u5199\u8eab\u9ad8\u3001\u4f53\u91cd\uff0c\u81ea\u52a8\u8ba1\u7b97BMI<\/p>\n\n\n\n<!--more-->\n\n\n\n<!DOCTYPE html>\n<div class=\"wp-bmi-calculator\">\n    <style>\n        :root {\n            --body-bg-start: #e8eaf6;\n            --body-bg-end: #d1c4e9;\n            --card-bg: rgba(255, 255, 255, 0.9);\n            --button-gradient-start: #7e57c2;\n            --button-gradient-end: #9575cd;\n            --button-hover-gradient-start: #673ab7;\n            --button-hover-gradient-end: #8e67c7;\n            --input-border: #bdbdbd;\n            --input-focus-border: #7e57c2;\n            --underweight-bg: #b3e5fc;\n            --normal-bg: #c8e6c9;\n            --overweight-bg: #ffe0b2;\n            --obese-bg: #ffcdd2;\n            --text-color: #212121;\n            --shadow-color: rgba(0, 0, 0, 0.1);\n        }\n\n       .wp-bmi-calculator {\n            font-family: 'Roboto', sans-serif;\n            background: linear-gradient(to bottom, var(--body-bg-start), var(--body-bg-end));\n            color: var(--text-color);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 20px;\n            position: relative; \/* \u4e3a\u4e86\u8ba9\u5f39\u5e55\u5b9a\u4f4d\u76f8\u5bf9\u4e8e\u8fd9\u4e2a\u5bb9\u5668 *\/\n            overflow: hidden; \/* \u9690\u85cf\u6ea2\u51fa\u7684\u5f39\u5e55 *\/\n        }\n\n       .wp-bmi-calculator .card {\n            background-color: var(--card-bg);\n            border-radius: 20px;\n            box-shadow: 0 16px 32px var(--shadow-color);\n            padding: 60px;\n            width: 90%;\n            max-width: 700px;\n            box-sizing: border-box;\n        }\n\n       .wp-bmi-calculator h1 {\n            text-align: center;\n            font-size: 32px;\n            margin-bottom: 40px;\n        }\n\n       .wp-bmi-calculator .input-group {\n            margin-bottom: 30px;\n        }\n\n       .wp-bmi-calculator label {\n            display: block;\n            margin-bottom: 12px;\n            font-size: 20px;\n            font-weight: 500;\n        }\n\n       .wp-bmi-calculator input[type=\"number\"] {\n            width: 100%;\n            padding: 18px;\n            border: 1px solid var(--input-border);\n            border-radius: 10px;\n            transition: border-color 0.3s ease;\n            font-size: 18px;\n            box-sizing: border-box;\n        }\n\n       .wp-bmi-calculator input[type=\"number\"]:focus {\n            border-color: var(--input-focus-border);\n            outline: none;\n        }\n\n       .wp-bmi-calculator button {\n            width: 100%;\n            padding: 18px;\n            background: linear-gradient(to right, var(--button-gradient-start), var(--button-gradient-end));\n            color: white;\n            border: none;\n            border-radius: 10px;\n            box-shadow: 0 8px 16px var(--shadow-color);\n            cursor: pointer;\n            transition: background 0.3s ease;\n            font-size: 20px;\n            font-weight: 500;\n        }\n\n       .wp-bmi-calculator button:hover {\n            background: linear-gradient(to right, var(--button-hover-gradient-start), var(--button-hover-gradient-end));\n        }\n\n       .wp-bmi-calculator #result {\n            margin-top: 40px;\n            padding: 30px;\n            border-radius: 10px;\n            text-align: center;\n            display: none;\n            font-size: 22px;\n        }\n\n       .wp-bmi-calculator #result .bmi-value {\n            font-size: 32px;\n            font-weight: 700;\n        }\n\n       .wp-bmi-calculator .danmaku {\n            position: absolute; \/* \u76f8\u5bf9\u4e8e.wp-bmi-calculator\u5b9a\u4f4d *\/\n            top: 0;\n            right: 0;\n            pointer-events: none;\n            z-index: 999;\n            white-space: nowrap;\n            padding: 16px 32px;\n            border-radius: 30px;\n            color: white;\n            background-color: hsl(calc(var(--random-hue, 0) * 360), 30%, 60%);\n            animation: danmakuMove linear;\n        }\n\n        @keyframes danmakuMove {\n            from {\n                transform: translateX(100%);\n            }\n            to {\n                transform: translateX(-100%); \/* \u76f8\u5bf9\u4e8e\u5bb9\u5668\u5bbd\u5ea6\u79fb\u52a8 *\/\n            }\n        }\n    <\/style>\n    <div class=\"card\">\n        <h1>BMI \u8ba1\u7b97\u5668<\/h1>\n        <div class=\"input-group\">\n            <label for=\"height\">\u4f60\u7684\u8eab\u9ad8(cm)<\/label>\n            <input type=\"number\" id=\"height\" placeholder=\"\u8bf7\u8f93\u5165\u8eab\u9ad8\">\n        <\/div>\n        <div class=\"input-group\">\n            <label for=\"weight\">\u4f60\u7684\u4f53\u91cd(kg)<\/label>\n            <input type=\"number\" id=\"weight\" placeholder=\"\u8bf7\u8f93\u5165\u4f53\u91cd\">\n        <\/div>\n        <button onclick=\"calculateBMI()\">\u8ba1\u7b97 BMI<\/button>\n        <div id=\"result\"><\/div>\n    <\/div>\n    <script>\n        function calculateBMI() {\n            const height = parseFloat(document.getElementById('height').value);\n            const weight = parseFloat(document.getElementById('weight').value);\n\n            if (isNaN(height) || isNaN(weight) || height <= 0 || weight <= 0) {\n                alert('\u8bf7\u8f93\u5165\u6709\u6548\u7684\u8eab\u9ad8\u548c\u4f53\u91cd\u503c\u3002');\n                return;\n            }\n\n            const bmi = (weight \/ ((height \/ 100) * (height \/ 100))).toFixed(2);\n            let category = '';\n            let message = '';\n            let resultBg = '';\n\n            if (bmi < 18.5) {\n                category = '\u504f\u7626';\n                message = '\u98ce\u4e00\u5439\uff0c\u4f60\u6015\u662f\u8981\u50cf\u98ce\u7b5d\u4e00\u6837\u98d8\u8d70\u54af\uff01';\n                resultBg = getComputedStyle(document.documentElement).getPropertyValue('--underweight-bg');\n            } else if (bmi >= 18.5 && bmi < 24) {\n                category = '\u6b63\u5e38';\n                message = '\u563f\uff0c\u4f60\u8fd9\u8eab\u6750\uff0c\u8001\u5929\u7237\u8d4f\u996d\u5403\u7684 \u201c\u521a\u521a\u597d\u201d \u5440\uff01';\n                resultBg = getComputedStyle(document.documentElement).getPropertyValue('--normal-bg');\n            } else if (bmi >= 24 && bmi < 28) {\n                category = '\u8d85\u91cd';\n                message = '\u518d\u80d6\u70b9\uff0c\u4f60\u80fd\u53bb\u7ed9\u718a\u732b\u5f53\u66ff\u8eab\u54af\uff01';\n                resultBg = getComputedStyle(document.documentElement).getPropertyValue('--overweight-bg');\n            } else {\n                category = '\u80a5\u80d6';\n                message = '\u4f60\u4e0d\u662f\u80d6\uff0c\u4f60\u662f\u53ef\u7231\u5230\u81a8\u80c0\u5566';\n                resultBg = getComputedStyle(document.documentElement).getPropertyValue('--obese-bg');\n            }\n\n            const resultDiv = document.getElementById('result');\n            resultDiv.innerHTML = `\u4f60\u7684 BMI \u503c\u662f\uff1a<span class=\"bmi-value\">${bmi}<\/span>\uff0c\u4f53\u91cd\u5206\u7c7b\uff1a${category}`;\n            resultDiv.style.display = 'block';\n            resultDiv.style.backgroundColor = resultBg;\n\n            generateDanmaku(message);\n        }\n\n        function generateDanmaku(message) {\n            const numDanmaku = Math.floor(window.innerHeight \/ 50);\n            const container = document.querySelector('.wp-bmi-calculator');\n            for (let i = 0; i < numDanmaku; i++) {\n                const danmaku = document.createElement('div');\n                danmaku.classList.add('danmaku');\n                danmaku.style.top = `${i * 50}px`;\n                danmaku.style.setProperty('--random-hue', Math.random());\n                danmaku.style.animationDuration = `${Math.random() * 8 + 4}s`;\n                danmaku.textContent = message;\n                container.appendChild(danmaku);\n\n                danmaku.addEventListener('animationend', () => {\n                    danmaku.remove();\n                });\n            }\n        }\n    <\/script>\n<\/div>    \n","protected":false},"excerpt":{"rendered":"<p>\u586b\u5199\u8eab\u9ad8\u3001\u4f53\u91cd\uff0c\u81ea\u52a8\u8ba1\u7b97BMI<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[70,219],"class_list":["post-5221","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-bmi","tag-tools"],"_links":{"self":[{"href":"https:\/\/liyue.name\/index.php?rest_route=\/wp\/v2\/posts\/5221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liyue.name\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/liyue.name\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/liyue.name\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/liyue.name\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5221"}],"version-history":[{"count":0,"href":"https:\/\/liyue.name\/index.php?rest_route=\/wp\/v2\/posts\/5221\/revisions"}],"wp:attachment":[{"href":"https:\/\/liyue.name\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/liyue.name\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/liyue.name\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}