帮我写一个html页面,要求用户可以输入自己的身高、体重、年龄、性别,然后页面根据用户输入的数据计算出BMI指数、理想体重、代谢率并呈现到页面上
时间: 2023-07-10 14:05:47 浏览: 55
好的,以下是一个简单的HTML页面,可以实现你的需求:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BMI计算器</title>
<style type="text/css">
label {
display: inline-block;
width: 100px;
text-align: right;
}
input {
margin-left: 10px;
}
button {
margin-left: 120px;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>BMI计算器</h1>
<form action="#" method="post">
<label>身高(cm):</label>
<input type="number" name="height" required><br>
<label>体重(kg):</label>
<input type="number" name="weight" required><br>
<label>年龄:</label>
<input type="number" name="age" required><br>
<label>性别:</label>
<input type="radio" name="gender" value="male" checked>男性
<input type="radio" name="gender" value="female">女性<br>
<button type="submit">计算</button>
</form>
<div id="result"></div>
<script type="text/javascript">
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
var height = parseFloat(document.querySelector('input[name="height"]').value);
var weight = parseFloat(document.querySelector('input[name="weight"]').value);
var age = parseInt(document.querySelector('input[name="age"]').value);
var gender = document.querySelector('input[name="gender"]:checked').value;
var bmi = weight / (height / 100) ** 2;
var ideal_weight = (height - 100) * 0.9;
if (gender === 'female') {
ideal_weight *= 0.9;
}
var bmr;
if (gender === 'male') {
bmr = 88.36 + 13.4 * weight + 4.8 * height - 5.7 * age;
} else {
bmr = 447.6 + 9.2 * weight + 3.1 * height - 4.3 * age;
}
var result = '<p>BMI指数:' + bmi.toFixed(2) + '</p>';
result += '<p>理想体重:' + ideal_weight.toFixed(2) + 'kg</p>';
result += '<p>代谢率(BMR):' + bmr.toFixed(2) + '千卡/天</p>';
document.querySelector('#result').innerHTML = result;
});
</script>
</body>
</html>
```
你可以将以上代码保存为一个HTML文件,然后在浏览器中打开即可。