体脂率计算器HTML实现

html<!DOCTYPE 复制代码
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>体脂率计算器</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #f4f6f8;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .card {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
      padding: 30px;
      width: 100%;
      max-width: 500px;
      box-sizing: border-box;
    }

    h1 {
      text-align: center;
      color: #333;
      margin-bottom: 20px;
    }

    .input-group {
      margin-bottom: 15px;
    }

    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      color: #555;
    }

    input[type="number"],
    select {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 14px;
    }

    button {
      width: 100%;
      padding: 12px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      margin-top: 10px;
    }

    button:hover {
      background-color: #0056b3;
    }

    .result {
      margin-top: 20px;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      color: #2c3e50;
    }

    .error {
      color: red;
      font-size: 14px;
      margin-top: 5px;
      text-align: center;
    }

    .copy-btn {
      margin-top: 10px;
      padding: 8px 12px;
      background-color: #2980b9;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .copy-btn:hover {
      background-color: #1c5d8a;
    }

    @media (max-width: 600px) {
      .card {
        padding: 20px;
      }
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>体脂率计算器</h1>
    <div class="input-group">
      <label for="gender">性别</label>
      <select id="gender">
        <option value="male">男</option>
        <option value="female">女</option>
      </select>
    </div>
    <div class="input-group">
      <label for="age">年龄（岁）</label>
      <input type="number" id="age" min="1" placeholder="请输入年龄" />
    </div>
    <div class="input-group">
      <label for="height">身高（cm）</label>
      <input type="number" id="height" min="50" placeholder="请输入身高" />
    </div>
    <div class="input-group">
      <label for="weight">体重（kg）</label>
      <input type="number" id="weight" min="1" placeholder="请输入体重" />
    </div>
    <div class="input-group">
      <label for="waist">腰围（cm）</label>
      <input type="number" id="waist" min="1" placeholder="请输入腰围" />
    </div>
    <button onclick="calculateBodyFat()">计算体脂率</button>
    <div class="result" id="result">体脂率：--%</div>
    <div class="error" id="error"></div>
    <button class="copy-btn" onclick="copyResult()">一键复制结果</button>
  </div>

  <script>
    // 默认示例数据
    const defaultData = {
      gender: "male",
      age: 30,
      height: 175,
      weight: 70,
      waist: 80
    };

    // 页面加载时填充默认值并计算
    window.onload = function () {
      document.getElementById("gender").value = defaultData.gender;
      document.getElementById("age").value = defaultData.age;
      document.getElementById("height").value = defaultData.height;
      document.getElementById("weight").value = defaultData.weight;
      document.getElementById("waist").value = defaultData.waist;
      calculateBodyFat();
    };

    // 计算体脂率函数
    function calculateBodyFat() {
      const gender = document.getElementById("gender").value;
      const age = parseInt(document.getElementById("age").value);
      const height = parseFloat(document.getElementById("height").value);
      const weight = parseFloat(document.getElementById("weight").value);
      const waist = parseFloat(document.getElementById("waist").value);

      // 验证输入
      if (
        isNaN(age) ||
        isNaN(height) ||
        isNaN(weight) ||
        isNaN(waist) ||
        age <= 0 ||
        height <= 0 ||
        weight <= 0 ||
        waist <= 0
      ) {
        document.getElementById("error").textContent = "请填写有效的数值。";
        document.getElementById("result").textContent = "体脂率：--%";
        return;
      }

      // 体脂率公式（基于美国运动医学会的估算方法）
      let bodyFatRate;

      if (gender === "male") {
        bodyFatRate = (1.2 * weight / (height * height)) + (0.23 * age) - 5.59;
      } else {
        bodyFatRate = (1.2 * weight / (height * height)) + (0.23 * age) - 16.19;
      }

      // 限制小数点后两位
      bodyFatRate = Math.round(bodyFatRate * 100) / 100;

      document.getElementById("result").textContent = `体脂率：${bodyFatRate}%`;
      document.getElementById("error").textContent = "";
    }

    // 复制结果函数
    function copyResult() {
      const resultText = document.getElementById("result").textContent;
      navigator.clipboard.writeText(resultText).then(
        function () {
          alert("结果已复制到剪贴板！");
        },
        function (err) {
          alert("复制失败，请手动复制。");
        }
      );
    }
  </script>
</body>
</html>
参考来源

Java+Vue+SpringBoot交通管理在线服务系统设计与实现