利用JavaScript实现BMI指数计算

最新推荐文章于 2023-11-20 18:26:58 发布
最新推荐文章于 2023-11-20 18:26:58 发布
阅读量1w 收藏 80
点赞数 9
分类专栏： javascript 文章标签： html js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48165407/article/details/114930943
版权

身体质量指数，是BMI指数，简称体质指数，是国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。
当然在做这个demo之前，我们要知道BMI的计算公式：体重(kg)/身高(m)²

实现原理

运用onchange事件配合方法获取input里身高和体重的值，再用公式计算BMI的值，用if判断BMI值所在的区间。就可以求出我们这个区间所对应的状况。

看效果

在这里插入图片描述

首先，写好页面内容：HTML

	<div class="top">
        <p>身体质量指数，是BMI指数，简称体质指数，是国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。</p>   
    </div>
    <div class="main">
        <div class="left">
            <h4>计算你的身体质量指数 (BMI)</h4>
            <p><span class="printbmi"></span>&nbsp;&nbsp;&nbsp;<span class="printbmi"></span></p>
            <div>我的身高：<input type="text" class="heht"> 单位：厘米 cm</div> 
            <div>我的体重：<input type="text" class="weht"> 单位：千克 kg</div> 
            <div>BMI 标准：<input type="text" value="中国标准"></div> 
            <div class="end"><input type="submit" value="计算BMI" onclick="onbmi()"></div> 
        </div>
        <div class="right">
            <p style="color: brown; font-weight: bold;">BMI中国标准</p>
            <table border="0px" cellspacing="0" cellpadding="0">
                <tr style="background-color: chartreuse;">
                    <th>分类</th>
                    <th>BMI范围</th>
                </tr>
                <tr style="background-color: hotpink;">
                    <th>偏瘦</th>
                    <th><= 18.4</th>
                </tr>
                <tr style="background-color: cyan;">
                    <th>正常</th>
                    <th>18.5 ~ 23.9</th>
                </tr>
                <tr style="background-color: slateblue;">
                    <th>过重</th>
                    <th>24.0 ~ 27.9</th>
                </tr>
                <tr style="background-color: purple;">
                    <th>肥胖</th>
                    <th>28~32</th>
                </tr>
                <tr style="background-color: royalblue;">
                    <th>严重肥胖</th>
                    <th>> 32.0</th>
                </tr>
            </table>
        </div>     
    </div>

再加入一些css样式，使其更加美观

		*{
            font-size: 16px;
            padding: 0px;
            margin: 0px;
        }
        .top{
            height: 150px;
            background-image: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3501997477,2331568432&fm=26&gp=0.jpg);
            background-size: 100%;
        }
        .top>p{
            font-size: 20px;
            color: white;
            font-weight: bold;
            text-align: center;
            padding: 50px;
        }
        .main{
            padding-top: 20px;
            width: 860px;
            height: 500px;
            margin: 0px auto;
            overflow:hidden; /*清除浮动*/
        }
        .left{
            float: left;
            width: 400px;
            border: 1px solid #E9E9E9;
            padding: 8px;
            box-shadow: 5px 10px 10px #999;
        }
        .left>div{
            margin-bottom: 10px;
        }
        .right{
            float: right;
            width: 400px;
        }
        th{
            width: 200px;
            line-height: 30px;
        }
        .end{
            width: 100px;
            margin: 20px auto;
        }
        input{
            outline: none;
            border: none;
            border-bottom: 2px solid orange;
            background-color: powderblue;
        }
        span{
            color: red;
            font-size: 18px;
        }

最重要的js部分

		var hv; 
        var wv;
        var heht = document.getElementsByClassName('heht')[0];
        var weht = document.getElementsByClassName('weht')[0];
        var printbmi0 = document.getElementsByClassName('printbmi')[0];
        var printbmi1 = document.getElementsByClassName('printbmi')[1];   
        //这两个函数是当身高和体重的value变化后，把改变后的value值赋给hv，wv。
        heht.onchange = function(){       
            hv = this.value;       
        }
        weht.onchange = function(){
            wv= this.value  
        }
        function onbmi(){
            var bmi = wv/((hv/100)**2); //BMI公式计算：体重（kg）除以身高（m）的平方
            if(hv>0 && wv>0){           //判断输入身高和体重是否大于零
                printbmi0.innerHTML = "你的BMI值为：" + bmi.toFixed(1);//bmi.toFixed 是将BMI值四舍五入且保留一位小数
                if(bmi < 18.5){
                    printbmi1.innerHTML = "你的身体状况：【偏瘦】";
                }else if(bmi>=18.5 && bmi <= 23.9){
                    printbmi1.innerHTML = "你的身体状况：【正常】";
                }else if(bmi>=24 && bmi < 28){
                    printbmi1.innerHTML = "你的身体状况：【过重】";
                }else if(bmi>=28 && bmi < 32){
                    printbmi1.innerHTML = "你的身体状况：【肥胖】";
                }else{
                    printbmi1.innerHTML = "你的身体状况：【严重肥胖】";
                }
            }else{
                printbmi0.innerHTML = "输入数据有误！！！";
                printbmi1.innerHTML = "";
            }
        }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>免费计算BMI</title>
    <style type="text/css">
        *{
            font-size: 16px;
            padding: 0px;
            margin: 0px;
        }
        .top{
            height: 150px;
            background-image: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3501997477,2331568432&fm=26&gp=0.jpg);
            background-size: 100%;
        }
        .top>p{
            font-size: 20px;
            color: white;
            font-weight: bold;
            text-align: center;
            padding: 50px;
        }
        .main{
            padding-top: 20px;
            width: 860px;
            height: 500px;
            margin: 0px auto;
            overflow:hidden; /*清除浮动*/
        }
        .left{
            float: left;
            width: 400px;
            border: 1px solid #E9E9E9;
            padding: 8px;
            box-shadow: 5px 10px 10px #999;
        }
        .left>div{
            margin-bottom: 10px;
        }
        .right{
            float: right;
            width: 400px;
        }
        th{
            width: 200px;
            line-height: 30px;
        }
        .end{
            width: 100px;
            margin: 20px auto;
        }
        input{
            border: none;
            border-bottom: 2px solid orange;
            background-color: powderblue;
        }
        span{
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="top">
        <p>身体质量指数，是BMI指数，简称体质指数，是国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。</p>   
    </div>
    <div class="main">
        <div class="left">
            <h4>计算你的身体质量指数 (BMI)</h4>
            <p><span class="printbmi"></span>&nbsp;&nbsp;&nbsp;<span class="printbmi"></span></p>
            <div>我的身高：<input type="text" class="heht"> 单位：厘米 cm</div> 
            <div>我的体重：<input type="text" class="weht"> 单位：千克 kg</div> 
            <div>BMI 标准：<input type="text" value="中国标准"></div> 
            <div class="end"><input type="submit" value="计算BMI" onclick="onbmi()"></div> 
        </div>
        <div class="right">
            <p style="color: brown; font-weight: bold;">BMI中国标准</p>
            <table border="0px" cellspacing="0" cellpadding="0">
                <tr style="background-color: chartreuse;">
                    <th>分类</th>
                    <th>BMI范围</th>
                </tr>
                <tr style="background-color: hotpink;">
                    <th>偏瘦</th>
                    <th><= 18.4</th>
                </tr>
                <tr style="background-color: cyan;">
                    <th>正常</th>
                    <th>18.5 ~ 23.9</th>
                </tr>
                <tr style="background-color: slateblue;">
                    <th>过重</th>
                    <th>24.0 ~ 27.9</th>
                </tr>
                <tr style="background-color: purple;">
                    <th>肥胖</th>
                    <th>28~32</th>
                </tr>
                <tr style="background-color: royalblue;">
                    <th>严重肥胖</th>
                    <th>> 32.0</th>
                </tr>
            </table>
        </div>     
    </div>
    <script type="text/javascript">
        var hv; 
        var wv;
        var heht = document.getElementsByClassName('heht')[0];
        var weht = document.getElementsByClassName('weht')[0];
        var printbmi0 = document.getElementsByClassName('printbmi')[0];
        var printbmi1 = document.getElementsByClassName('printbmi')[1];   
        //这两个函数是当身高和体重的value变化后，把改变后的value值赋给hv，wv。
        heht.onchange = function(){       
            hv = this.value;       
        }
        weht.onchange = function(){
            wv= this.value  
        }
        function onbmi(){
            var bmi = wv/((hv/100)**2); //BMI公式计算：体重（kg）除以身高（m）的平方
            if(hv>0 && wv>0){           //判断输入身高和体重是否大于零
                printbmi0.innerHTML = "你的BMI值为：" + bmi.toFixed(1);//bmi.toFixed 是将BMI值四舍五入且保留一位小数
                if(bmi < 18.5){
                    printbmi1.innerHTML = "你的身体状况：【偏瘦】";
                }else if(bmi>=18.5 && bmi <= 23.9){
                    printbmi1.innerHTML = "你的身体状况：【正常】";
                }else if(bmi>=24 && bmi < 28){
                    printbmi1.innerHTML = "你的身体状况：【过重】";
                }else if(bmi>=28 && bmi < 32){
                    printbmi1.innerHTML = "你的身体状况：【肥胖】";
                }else{
                    printbmi1.innerHTML = "你的身体状况：【严重肥胖】";
                }
            }else{
                printbmi0.innerHTML = "输入数据有误！！！";
                printbmi1.innerHTML = "";
            }
        }
    </script>
</body>
</html>
vernin
关注
专栏目录
js制作bmi指数计算器代码
kaiser099的博客
05-30 1399
参考文章：http://tishang.net/articles/1685454860.html。计算结果：计算出体重指数。
用javascript计算bmi_web前端开发（三）—JavaScript基础
weixin_39782832的博客
01-22 684
一、JS简介JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。JS代码写在HTML的script标签内。二、JS变量 JS变量用于存储程序所需要的数据。 语法： var 变量名 = 变量值； 例： var age = 18; var name = “田轩”；变量名是大小写英文、数字、$和_...
BMI身体指数计算
06-21
BMI身体指数计算，实现功能：BMI计算同时显示相应的图片和文字叙述，通知栏显示，以及按钮和关于按钮等。
利用Javascript实现BMI计算器
10-21
BMI指数计算器相信大家都用过，那用JavaScript怎么实现呢？其实很简单，这篇文章给出了实例代码，有需要的可以参考学习。
【JS】BMI身体质量指数计算工具
最新发布
DevFrank的博客
11-20 863
BMI身体质量指数计算工具的JS实现
js|BMI指数计算(含测试源码)
执念斩长河
05-19 6356
本博文源于js基础，旨在讨论如何实现js中BMI计算
利用Javascript实现BMI计算器_.docx
10-09
通过上述代码，我们可以看到利用JavaScript实现BMI计算器的过程非常简单直观。用户只需要输入自己的身高和体重，程序即可自动计算出BMI值，并基于计算结果提供个性化的健康建议。这种类型的工具非常适合个人健康管理...
BMI健康指数素材.zip
06-24
在这个JavaScript小项目中，我们关注的是使用HTML和CSS来实现BMI值的计算。下面我们将深入探讨HTML和CSS在实现这个功能中的应用以及相关知识点。 **HTML基础知识** HTML（HyperText Markup Language）是网页内容的...
JavaScript 计算标准体重的公式
LY1237的博客
12-12 3669
判断标准体重 世卫计算方法： 男性：(身高cm－80)×70﹪=标准体重 女性：(身高cm－70)×60﹪=标准体重 标准体重正负10﹪为正常体重 标准体重正负10﹪~ 20﹪为体重过重或过轻 标准体重正负20﹪以上为肥胖或体重不足 <script> var height = prompt('请输入你的身高(cm)：'); //身高的值 if (heig...
7练习计算BMI值指数.html）.html
09-18
”计算BMI值指数” 前端最基础部分，第三章节js语言基础。
身体质量指数计算器（BMI）
07-08
BMI身体质量指数计算器，包括前端和后台两部分，前端采用H5+js+ajax设计，后台Java设计（没有使用框架），界面比较美观，代码比较简洁。
关于身体质量指数计算器
04-15
这是一个BMI身体质量指数计算器，可以根据身高及体重计算身体质量指数并给出理想条件。
JavaScript求BMI指数
qq_56666739的博客
11-01 1549
小明身高1.75，体重80.5kg。请根据BMI公式（体重除以身高的平方）帮小明计算他的BMI指数，并根据BMI指数： 低于18.5：过轻 18.5~25：正常 25~28：过重 28~32：肥胖 代码如下： 测试结果： BMI指数： 可知小明体重过重。 ...
JavaScript BMI指数判断
weixin_57775218的博客
05-18 793
JavaScript BMI指数判断 1.首先创建好 html 的格式（！+Tab），然后在 head结尾处 设置一个link标签，在link标签里引入Bootstrap文件样式（这里采用Bootstrap布局完成css样式），在body标签里创建一个大的div标签，在其里面创建好h5标签设置好相应的文本内容后，再创建一个div标签设置类（class=“row”（这里指行），如下图： 2.接着在其下面创建一个div标签并设置类（class=“col-3（这里指宽距（共12段））”），然后创.
JavaScript学习笔记_3 BMI指数
qq_44700440的博客
03-01 577
let height = 1.76; let weight = 61; let BMI = weight / (height * height); let result = " "; if(BMI < 18.5){ result = "slim"; }else if (BMI < 25){ result = "normal"; }else if (BMI < ...
JavaScript小项目之BMI值计算
Wc&Yd博客
06-24 2857
项目题目： 1、窗口状态的检测（是否打开、关闭等）； 2、页面定时跳转功能； 项目作用： 1、复习JavaScript课程理论知识，学习BOM基础知识，熟悉window.open()以及location对象实现窗口的状态检测； 2、复习JavaScript课程知识，学习BOM基础知识，熟悉定时器setTimeout()方法，实现页面在定时跳转； JavaScript小项目系列前言一、BOM是什么？二、基础内容介绍1.window对象1.1 全局作用域1.2 弹出、关闭窗口1.3 定时器三、项目实施内
【JS】【HTML】BMI的计算
qq_56494741的博客
06-14 953
实验内容如下:BMI的计算公式如下：请完成以下功能：• 设置合适的变量名存储身高和体重，以及置合适的变量名存储 BMI 值• BMI 值请打印在控制台中，BMI 必须四舍五入到最接近的整数。• 给代码添加合适的注释。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值