首页制作一个可以计算BMI的网页

制作一个可以计算BMI的网页

时间: 2024-09-24 08:14:09 浏览: 42

为了制作一个可以计算BMI（身体质量指数）的网页，你可以利用HTML布局页面结构，CSS美化外观，以及JavaScript编写交互逻辑。下面是一个简单的示例： **1. HTML 结构：** ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>BMI计算器</title> <link rel="stylesheet" href="styles.css">  </head> <body> <div class="container"> <h1>BMI计算器</h1> <form id="bmi-form"> <label for="weight">体重（kg）:</label> <input type="number" id="weight" required><br> <label for="height">身高（m）:</label> <input type="number" id="height" required><br> <button type="button" onclick="calculateBMI()">计算</button> <p id="result"></p> </form> </div> <script src="scripts.js"></script>  </body> </html> ``` **2. CSS (styles.css):** ```css .container { max-width: 400px; margin: 0 auto; text-align: center; } ``` **3. JavaScript (scripts.js):** ```javascript function calculateBMI() { const weight = document.getElementById('weight').value; const height = document.getElementById('height').value; // BMI 计算同上 const bmi = calculateBMIValue(weight, height); document.getElementById('result').innerText = `您的BMI是: ${bmi} kg/m²`; } function calculateBMIValue(weight, height) { // 这里省略了转换高度为厘米的步骤，直接计算 return weight / (height * height); } ``` 在这个例子中，用户可以在表单中输入体重和身高，点击“计算”按钮会触发`calculateBMI()`函数，计算BMI并显示结果。

阅读全文