基于聚合数据做的一个健康体重计算器的代码
原创
基于聚合数据做的一个健康体重计算器的代码
原创
夏末浅笑
发布于 2025-10-13 21:43:40
发布于 2025-10-13 21:43:40
设计了一个响应式的身高体重计算器网页，集成了聚合数据的标准身高体重计算器 API。这个页面采用了现代化的 UI 设计，具有流畅的交互体验和清晰的结果展示。
页面主要特点：
- 响应式设计，适配各种设备屏幕
- 直观的表单输入区域，包含身高、体重、年龄和性别选择
- 实时计算 BMI 并提供健康评估
- 优雅的动画和过渡效果
- 清晰的结果展示区域，包含健康建议
以下是完整的 PHP 代码实现：
<?php
// 处理表单提交
$results = null;
$error = null;
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// 验证输入
if (empty($_POST['height']) || empty($_POST['weight']) || empty($_POST['age']) || empty($_POST['gender'])) {
$error = "请填写所有必填字段";
} else {
// 准备API请求参数
$apiUrl = 'http://apis.juhe.cn/fapig/calculator/weight';
$appKey = 'ca13b43b5b5a23替换成你的API*******422a7bf5396';
$params = [
'height' => $_POST['height'],
'weight' => $_POST['weight'],
'age' => $_POST['age'],
'gender' => $_POST['gender'],
'key' => $appKey
];
// 发起API请求
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $apiUrl . '?' . http_build_query($params));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
if (curl_errno($ch)) {
$error = "请求失败：" . curl_error($ch);
} else if ($httpCode != 200) {
$error = "API请求失败，状态码：" . $httpCode;
} else {
// 解析API响应
$data = json_decode($response, true);
if (isset($data['error_code']) && $data['error_code'] == 0) {
$results = $data['result'];
} else {
$error = "API返回错误：" . ($data['reason'] ?? '未知错误');
}
}
curl_close($ch);
}
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>健康体重计算器</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
accent: '#F59E0B',
danger: '#EF4444',
neutral: '#64748B'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.card-shadow {
box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(59, 130, 246, 0.1);
}
.input-focus {
@apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
}
.transition-custom {
@apply transition-all duration-300 ease-in-out;
}
}
</style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen font-sans text-gray-800">
<div class="container mx-auto px-4 py-8 md:py-16 max-w-4xl">
<!-- 页面标题 -->
<header class="text-center mb-10 md:mb-16">
<h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-gray-800 mb-3 tracking-tight">
健康体重计算器
</h1>
<p class="text-gray-600 max-w-2xl mx-auto text-lg">
输入您的身高、体重等信息，计算BMI指数并评估您的健康状况
</p>
</header>
<div class="grid md:grid-cols-5 gap-8">
<!-- 表单区域 -->
<div class="md:col-span-2">
<div class="bg-white rounded-2xl p-6 md:p-8 card-shadow transition-custom hover:shadow-lg">
<form method="post" class="space-y-6">
<div>
<label for="height" class="block text-sm font-medium text-gray-700 mb-1">
身高 (厘米)
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
<i class="fa fa-arrows-v"></i>
</span>
<input
type="number"
id="height"
name="height"
min="50"
max="250"
step="0.1"
required
class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus transition-custom"
placeholder="例如：175"
value="<?php echo isset($_POST['height']) ? htmlspecialchars($_POST['height']) : ''; ?>">
</div>
</div>
<div>
<label for="weight" class="block text-sm font-medium text-gray-700 mb-1">
体重 (公斤)
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
<i class="fa fa-balance-scale"></i>
</span>
<input
type="number"
id="weight"
name="weight"
min="10"
max="300"
step="0.1"
required
class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus transition-custom"
placeholder="例如：65"
value="<?php echo isset($_POST['weight']) ? htmlspecialchars($_POST['weight']) : ''; ?>">
</div>
</div>
<div>
<label for="age" class="block text-sm font-medium text-gray-700 mb-1">
年龄
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
<i class="fa fa-calendar"></i>
</span>
<input
type="number"
id="age"
name="age"
min="1"
max="120"
required
class="w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg input-focus transition-custom"
placeholder="例如：30"
value="<?php echo isset($_POST['age']) ? htmlspecialchars($_POST['age']) : ''; ?>">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">
性别
</label>
<div class="flex space-x-4">
<label class="inline-flex items-center cursor-pointer">
<input
type="radio"
name="gender"
value="1"
required
class="sr-only peer"
<?php echo (isset($_POST['gender']) && $_POST['gender'] == '1') ? 'checked' : ''; ?>>
<div class="w-5 h-5 border border-gray-300 rounded-full flex items-center justify-center peer-checked:bg-primary peer-checked:border-primary transition-custom">
<div class="w-3 h-3 rounded-full bg-white opacity-0 peer-checked:opacity-100 transition-custom"></div>
</div>
<span class="ml-2 text-gray-700">男</span>
</label>
<label class="inline-flex items-center cursor-pointer">
<input
type="radio"
name="gender"
value="0"
required
class="sr-only peer"
<?php echo (isset($_POST['gender']) && $_POST['gender'] == '0') ? 'checked' : ''; ?>>
<div class="w-5 h-5 border border-gray-300 rounded-full flex items-center justify-center peer-checked:bg-primary peer-checked:border-primary transition-custom">
<div class="w-3 h-3 rounded-full bg-white opacity-0 peer-checked:opacity-100 transition-custom"></div>
</div>
<span class="ml-2 text-gray-700">女</span>
</label>
</div>
</div>
<button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom transform hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center">
<i class="fa fa-calculator mr-2"></i>
开始计算
</button>
</form>
</div>
</div>
<!-- 结果展示区域 -->
<div class="md:col-span-3">
<div class="bg-white rounded-2xl p-6 md:p-8 card-shadow h-full transition-custom hover:shadow-lg">
<h2 class="text-xl font-bold mb-6 flex items-center">
<i class="fa fa-line-chart text-primary mr-2"></i>
健康评估结果
</h2>
<?php if ($error): ?>
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6 flex items-start">
<i class="fa fa-exclamation-circle mt-1 mr-3 text-danger"></i>
<p><?php echo htmlspecialchars($error); ?></p>
</div>
<?php endif; ?>
<?php if ($results): ?>
<div class="space-y-6 animate-fadeIn">
<!-- BMI值和等级 -->
<div class="text-center mb-8">
<div class="inline-block p-1 bg-primary/10 rounded-full mb-3">
<div class="w-32 h-32 md:w-40 md:h-40 rounded-full bg-white flex items-center justify-center shadow-sm">
<div>
<div class="text-3xl md:text-4xl font-bold text-primary">
<?php echo number_format($results['bmi'], 1); ?>
</div>
<div class="text-sm text-gray-500">BMI指数</div>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-semibold mb-1">
<?php
$levelClass = '';
switch ($results['level']) {
case '偏瘦':
$levelClass = 'text-blue-500';
break;
case '正常':
$levelClass = 'text-secondary';
break;
case '偏胖':
$levelClass = 'text-accent';
break;
case '肥胖':
$levelClass = 'text-danger';
break;
}
echo '<span class="' . $levelClass . '">' . $results['level'] . '</span>';
?>
</h3>
<p class="text-gray-600 text-sm">
正常范围: 18.5 - 23.9
</p>
</div>
</div>
<!-- 健康数据 -->
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="bg-gray-50 p-4 rounded-lg">
<div class="text-sm text-gray-500 mb-1">标准体重</div>
<div class="text-lg font-semibold">
<?php echo number_format($results['standard_weight'], 1); ?> 公斤
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="text-sm text-gray-500 mb-1">健康体重范围</div>
<div class="text-lg font-semibold">
<?php echo number_format($results['health_weight_low'], 1); ?> - <?php echo number_format($results['health_weight_high'], 1); ?> 公斤
</div>
</div>
</div>
</div>
<?php else: ?>
<div class="text-center py-12 text-gray-500">
<div class="w-20 h-20 mx-auto mb-4 text-gray-300">
<i class="fa fa-user-circle-o text-[5rem]"></i>
</div>
<p>请填写左侧信息并点击计算按钮获取健康评估结果</p>
</div>
<?php endif; ?>
<!-- BMI参考表 -->
<div class="mt-8 pt-6 border-t border-gray-100">
<h3 class="font-semibold mb-4 text-sm uppercase text-gray-500 tracking-wider">BMI参考标准</h3>
<div class="overflow-x-auto">
<table class="min-w-full text-sm">
<thead>
<tr class="bg-gray-50">
<th class="py-2 px-3 text-left font-medium text-gray-600 rounded-l-lg">BMI范围</th>
<th class="py-2 px-3 text-left font-medium text-gray-600 rounded-r-lg">体型判断</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
<tr>
<td class="py-2 px-3">＜18.5</td>
<td class="py-2 px-3">偏瘦</td>
</tr>
<tr>
<td class="py-2 px-3">18.5 - 23.9</td>
<td class="py-2 px-3">正常</td>
</tr>
<tr>
<td class="py-2 px-3">24.0 - 27.9</td>
<td class="py-2 px-3">偏胖</td>
</tr>
<tr>
<td class="py-2 px-3">≥28.0</td>
<td class="py-2 px-3">肥胖</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="mt-12 text-center text-gray-500 text-sm">
<p>© <?php echo date('Y'); ?> 健康体重计算器 | 数据来源: 聚合数据</p>
</footer>
</div>
<script>
// 添加页面加载和表单提交的动画效果
document.addEventListener('DOMContentLoaded', function() {
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// 表单提交动画
const form = document.querySelector('form');
if (form) {
form.addEventListener('submit', function() {
const submitBtn = form.querySelector('button[type="submit"]');
submitBtn.disabled = true;
submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 计算中...';
});
}
});
</script>
</body>
</html>这个实现包含了所有必要的功能，包括表单验证、API 调用、结果展示和响应式设计。界面采用了现代化的卡片式布局，搭配蓝色主色调传达健康、专业的感觉。同时加入了微妙的动画和过渡效果，提升用户体验。
健康体重计算器
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
