blog/source/_posts/作品/工具/身体质量指数.md

---
title: 身体质量指数
categories:
  - 作品
  - 工具
keywords:
  - 健康
tags:
  - JavaScript
date: 2022-09-02 17:12:35
mathjax: true
---

身体质量指数（Body Mass Index，简称BMI），简称体质指数，是由一个人的质量（体重）和身高计算出的一个数值。BMI的定义是体重除以身高的平方，以千克/平方米为单位表示，由质量（千克）和身高（米）得出：

$$ BMI = { 体重 \over 身高 ^ {2} } $$

身体质量指数是国际上衡量人体胖瘦程度以及是否健康的一个常用指标，BMI正常值在20至25之间，超过25为超重，30以上则属肥胖。

## 计算器

<style>
    #calculator,
    #calculator * {
        margin: 10px auto;
        box-sizing: border-box;
    }

    #calculator,
    #calculator button {
        width: 300px;
    }

    #calculator label,
    #calculator input {
        width: 150px;
        color: black;
        display: inline-block;
    }

    button {
        cursor: pointer;
    }

</style>

<div id="calculator">
    <div><label for="weight">体重（千克）：</label><input id="weight" type="text" autocomplete="off"></div>
    <div><label for="weight">身高（厘米）：</label><input id="height" type="text" autocomplete="off"></div>
    <div><label>您的BMI：</label><input id="bmi" type="text" disabled></div>
    <button onclick="calculate()">计算</button>
</div>

<script>
    bmi.value = 0
    function calculate() {
        const w = Number(weight.value)
        const h = Number(height.value) / 100
        bmi.value = (isNaN(w) || isNaN(h) || !h) ? 0 : (Math.round(w / h ** 2)).toFixed(1)
    }
</script>

<!-- more -->

## 源码

``` html
<style>
    #calculator,
    #calculator * {
        margin: 10px auto;
        box-sizing: border-box;
    }

    #calculator,
    #calculator button { width: 300px; }

    button { cursor: pointer; }

    #calculator label,
    #calculator input {
        width: 150px;
        color: black;
        display: inline-block;
    }
</style>

<div id="calculator">
    <div>
        <label for="weight">体重（千克）：</label>
        <input id="weight" type="text" autocomplete="off">
    </div>
    <div>
        <label for="weight">身高（厘米）：</label>
        <input id="height" type="text" autocomplete="off">
    </div>
    <div>
        <label>您的BMI：</label>
        <input id="bmi" type="text" disabled>
    </div>
    <button onclick="calculate()">计算</button>
</div>

<script>
    bmi.value = 0
    function calculate() {
        const w = Number(weight.value)
        const h = Number(height.value) / 100
        bmi.value = (isNaN(w) || isNaN(h) || !h) ? 0 : (Math.round(w / h ** 2)).toFixed(1)
    }
</script>
```