帮我写一个健康管理页面,功能包括: 1、用户输入ID、日期 2、输入身高体重可得到BMI数值,并根据BMI数值得出用户的肥胖情况 3、提供上传按钮,上传前面所有数据
时间: 2024-04-08 16:31:21 浏览: 73
好的,以下是一个健康管理页面的代码示例,包括您所需的功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>健康管理页面</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
#form-container {
margin: 0 auto;
width: 300px;
}
input[type="text"], input[type="number"], input[type="date"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#result {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>健康管理</h1>
<div id="form-container">
<input type="text" id="userId" placeholder="用户ID">
<input type="date" id="date" placeholder="日期">
<input type="number" id="height" placeholder="身高(cm)">
<input type="number" id="weight" placeholder="体重(kg)">
<button onclick="calculateBMI()">计算BMI</button>
<button onclick="uploadData()">上传数据</button>
</div>
<div id="result"></div>
<script>
function calculateBMI() {
var height = document.getElementById("height").value;
var weight = document.getElementById("weight").value;
if (height && weight) {
var bmi = weight / ((height / 100) ** 2);
var result = document.getElementById("result");
if (bmi < 18.5) {
result.innerHTML = "您的BMI数值为 " + bmi.toFixed(2) + ",属于体重过轻";
} else if (bmi >= 18.5 && bmi < 24.9) {
result.innerHTML = "您的BMI数值为 " + bmi.toFixed(2) + ",属于正常体重";
} else if (bmi >= 24.9 && bmi < 29.9) {
result.innerHTML = "您的BMI数值为 " + bmi.toFixed(2) + ",属于超重";
} else {
result.innerHTML = "您的BMI数值为 " + bmi.toFixed(2) + ",属于肥胖";
}
}
}
function uploadData() {
var userId = document.getElementById("userId").value;
var date = document.getElementById("date").value;
var height = document.getElementById("height").value;
var weight = document.getElementById("weight").value;
// 在此处执行上传数据的逻辑,可以将数据发送到服务器或保存在本地等
console.log("用户ID: " + userId);
console.log("日期: " + date);
console.log("身高: " + height);
console.log("体重: " + weight);
// 清空表单数据
document.getElementById("userId").value = "";
document.getElementById("date").value = "";
document.getElementById("height").value = "";
document.getElementById("weight").value = "";
// 提示上传成功
alert("数据上传成功!");
}
</script>
</body>
</html>
```
您可以将以上代码保存为一个 `.html` 文件,并在浏览器中打开该文件,即可看到带有所需功能的健康管理页面。在点击上传按钮时,数据将被打印到控制台,您可以根据需求在 `uploadData()` 函数中添加实际的数据上传逻辑。
阅读全文