首页编写html+css+js计算体重BMI的完整网页的源代码

编写html+css+js计算体重BMI的完整网页的源代码

时间: 2023-06-01 16:06:43 浏览: 114

当然，我可以帮你回答这个问题！以下是一个简单的BMI计算器的HTML、CSS和JavaScript代码： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>BMI Calculator</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>BMI Calculator</h1> <div> <label for="weight">Weight (kg):</label> <input type="number" id="weight" required> </div> <div> <label for="height">Height (cm):</label> <input type="number" id="height" required> </div> <button onclick="calculateBMI()">Calculate</button> <div id="result"></div> <script src="script.js"></script> </body> </html> ``` CSS代码： ``` body { font-family: Arial, sans-serif; margin: 0; padding: 0; } h1 { text-align: center; } div { margin: 10px 0; } label { display: inline-block; width: 120px; } input { padding: 5px; } button { margin-top: 10px; padding: 10px; background-color: #008CBA; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; } #result { margin-top: 20px; } ``` JavaScript代码： ``` function calculateBMI() { var weight = document.getElementById("weight").value; var height = document.getElementById("height").value / 100; var bmi = weight / (height * height); var category = ""; if (bmi < 18.5) { category = "Underweight"; } else if (bmi < 25) { category = "Normal weight"; } else if (bmi < 30) { category = "Overweight"; } else { category = "Obese"; } document.getElementById("result").innerHTML = "Your BMI is " + bmi.toFixed(1) + ", which means you are " + category + "."; } ``` 希望这个代码对您有所帮助！

阅读全文