【JS】【HTML】BMI的计算

最新推荐文章于 2023-11-20 18:26:58 发布

倔强青铜刀刀

最新推荐文章于 2023-11-20 18:26:58 发布

阅读量897

点赞数 4

文章标签： javascript html 开发语言

本文链接：https://blog.csdn.net/qq_56494741/article/details/131203039

版权

实验内容如下:
BMI的计算公式如下：
在这里插入图片描述

请完成以下功能：
• 设置合适的变量名存储身高和体重，以及置合适的变量名存储 BMI 值
• BMI 值请打印在控制台中，BMI 必须四舍五入到最接近的整数。
• 给代码添加合适的注释

html代码

<!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;
        }
        .main {
            text-align: center;
            padding-top: 40px;
            width: 860px;
            height: 500px;
            margin: 0px auto;
        }

        label {
            margin-top: 10px;
            display: inline-block;
            min-width: 100px;
            /*或者 width: 100px;*/
        }
        input {
            height: 23px;
            text-align: center;
        }

        /* BIM整体设计 */
        .BIM_main {
            float: left;
            width: 400px;
            border: 2px solid #E9E9E9;
            padding: 8px;
            box-shadow: 5px 10px 10px #999;
        }

        .BIM_end {
            width: 170px;
            margin: 20px auto;
        }

    
        span {
            color: red;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="BIM_main">
            <label>身高(m)：</label><input type="text" class="BH">
            <label>体重(kg)：</label><input type="text" class="BW">
            <button class="BIM_end" onclick="onbmi()">计算BMI</button>
            <!-- 使用“提示”使用 span 元素,输入体重和身高后计算BIM后在按钮下方进行提示 -->
            <p><span class="printbmi"></span>&nbsp;&nbsp;&nbsp;<span class="printbmi"></span></p>
        </div>

    </div>
    <script >
        var hv;
        var wv;
        var BH = document.getElementsByClassName('BH')[0];
        var BW = document.getElementsByClassName('BW')[0];
        var printbmi0 = document.getElementsByClassName('printbmi')[0];
        var printbmi1 = document.getElementsByClassName('printbmi')[1];
        //这两个函数是当身高和体重的value变化后，把改变后的value值赋给hv，wv。
        BH.onchange = function () {
            hv = this.value;
        }
        BW.onchange = function () {
            wv = this.value
        }
        function onbmi() {
            var bmi = wv / (hv * hv); //BMI公式计算：体重kg除以身高cm的平方
            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>

实验测试结果如下图：

在这里插入图片描述

倔强青铜刀刀

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【JS】【HTML】BMI的计算

实验内容如下:BMI的计算公式如下：请完成以下功能：• 设置合适的变量名存储身高和体重，以及置合适的变量名存储 BMI 值• BMI 值请打印在控制台中，BMI 必须四舍五入到最接近的整数。• 给代码添加合适的注释。
复制链接

扫一扫