全栈开源：BMI身体质量指数计算器开源代码，公式、标准、超重、肥胖范围

最新推荐文章于 2025-03-06 16:19:51 发布

全栈开发助手

最新推荐文章于 2025-03-06 16:19:51 发布

阅读量571

点赞数 4

CC 4.0 BY-SA版权

文章标签：开源 html5 javascript 微信小程序小程序

本文链接：https://blog.csdn.net/weixin_47378963/article/details/145918449

简介：

下面将为各位读者朋友们开源BMI身体质量指数在线计算器的开发代码，分为两个版本，一个版本是PC端的网页版，另一个是微信小程序的版本。如果不懂得代码的朋友也没事，可以直接复制PC端网页版的代码到.txt的文件中，然后修改成.html即可，然后右键点击，选择“打开方式”中的浏览器即可。

BMI身体质量指数计算公式：

BMI= 体重（kg）/ 身高（m）²

网络

BMI指数

bmi是什么：英文为Body Mass Index，又称身体质量指数，是目前国际上常用的衡量人的身体胖瘦程度的一个参考指标。

BMI指数的超重、肥胖范围参考表

注意：数据来源网络，仅供参考，不保证正确性，不作任何决策依据！

BMI标准分类	WHO标准	亚洲标准	中国标准
体重过低	BMI < 18.5	BMI < 18.5	BMI < 18.5
正常范围	BMI >= 18.5	BMI >= 18.5	BMI >= 18.5
超重	BMI >= 25	BMI >= 23	BMI >= 24
肥胖前期	BMI >= 25	BMI >= 23	BMI >= 24
I度肥胖	BMI >= 30	BMI >= 25	BMI >= 28
II度肥胖	BMI >= 35	BMI >= 30	BMI >= 30
III度肥胖	BMI >= 40	BMI >= 40	BMI >= 40

PC端BMI计算器开源代码：

为了适配不同的前端框架，这里就设置了最简单的CSS样式，免得使用的时候为了设置不同的样式还得去手动去删除，与此同时，为了方便，脚本这边将直接使用JavaScript，而不使用Jquery了：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- html部分的代码 -->
    <div>
      <span>体重（kg）</span><input style="margin-left: 10px; width: 200px" id="i1" placeholder="输入"/>
    </div>
    <div>
      <span>身高（m）</span><input style="margin-left: 10px; width: 200px" id="i2" placeholder="输入" onkeypress="edn(event)" />
    </div>
    <div>
      <button class="bt" onclick="count()">求bmi</button><span style="margin-left: 10px; color: green" id="ds1"></span>
    </div>
    <!-- js部分的代码，这里直接写在html中，也可以写在js文件中，然后引入 -->
    <script>
    //edn用于监听在当鼠标聚焦在身高输入框时，按下回车键，就触发count()函数
    function edn(event) {
        if (event.keyCode === 13 || event.key === 'Enter') {
          count();
        }
    }
      
      function count() {
        var ds1 = document.getElementById("ds1");
        ds1.innerHTML = ""; //每次计算之前先清空答案
        var w = document.getElementById("i1").value;
        var h = document.getElementById("i2").value;
        var bmi = 0;
        if (w == "" || h == "") {
          alert("请输入数值");
        } else if (w.indexOf(" ") >= 0 || h.indexOf(" ") >= 0) {
          alert("请不要输入空格");
        } else if (isNaN(w) || isNaN(h)) {
          alert("请正确输入数值");
        } else {
          w = Number(w);
          h = Number(h);
          bmi = (w / (h * h)).toFixed(2);
        }
        ds1.innerHTML = bmi;
      }
    </script>
  </body>
</html>

微信小程序端开源代码：

wxml文件：

<view class="container">
   <form bindsubmit="count">
  
  <view>
    <label for="a">体重(kg)：</label><input type="digit"  name='a' id="a" style="width:100%;border: 1px solid black;"></input>
  </view>
   <view>
    <label for="d">身高(m)：</label><input type="digit"   name='d' id="d" style="width:100%;border:1px solid black;"></input>
  </view>
  <view >
    <button  form-type="submit">确定</button>
  </view>
 
  <text>{{resultData}}</text>
  </form> 
  
  </view>

js文件：

data: {
    resultData:""
  },
  
// 判断是否是数字
  isNum:function(arg){
    const regex = /^-?\d+(\.\d+)?$/;
    return regex.test(arg)
  },
// 如果输入有误，则弹出信息进行提示
  showMessage:function(arg){
    let str;
    if(arg==1){
      str="请输入有效数字"
    }else if(arg==2){
      str = "请输入有效数字或选择性别"
    }else{
      str = "请输入有效的打卡实际数字"
    }
    wx.showToast({
      title: str,
      icon: 'none', 
      duration: 2000, 
    });
  },
  // 根据输入的值计算的函数
  count(e){
    // 根据wxml中input的name属性获取输入的值
    let a = e.detail.value.a;
    let d = e.detail.value.d; 
    // 先判断是否输入的值为空
  if(a!='' && d!=''){
    // 再判断是否是有效的数字
    if(this.isNum(a) && this.isNum(d)){
    a = Number(a)
    d = Number(d)
      let v = (a/(d*d)).toFixed(3).toString();
      this.setData({resultData:v})
    }else{
      this.showMessage(1)
    }
    }else{
      this.showMessage(1)
    }
    
  },