H5+jQuery & H5+JavaScript 体质指数BMI计算

效果图:

BMI实例

代码段:

注:CSS 与 HTML 为   jQuery、JavaScript 两种方法的通用资源

使用之前请自行引入 CSSjs

css:


form {
    position: relative;
    border: 1px solid black;
    text-align: center;
    margin: 0 auto;
    padding: 20px 10px 5px 10px;
    width: 300px;
    height: 300px;
}

.head {
    display: flex;
    position: absolute;
    top: -10px;
    left: 10px;
    background-color: rgb(255, 255, 255);
}

.btn {
    position: relative;
    top: 10px;
    left: -100px;
    margin-left: 20px !important;
}

.show {
    position: relative;
    top: 20px;
    height: 180px;
    border: 1px solid green;
    text-align: left;
}
.iframe{
    visibility: hidden;
}

HTML:

<body>
    <form action="" target="myIframe">
        <div class="head"> BMI计算 </div>
        <div>
            <label for="height">身高(m):</label>
            <input type="text" name="height" id="height">
        </div>
        <p></p>
        <div>
            <label for="weight">体重(kg):</label>
            <input type="text" name="weight" id="weight">
        </div>
        <input class="btn" type="submit" id="submit" value="提交">
        <input class="btn" type="reset" id="reset" value="清除">
        <div class="show">
            请输入身高与体重
        </div>
    </form>
    <iframe id="myIframe" name="myIframe" class="iframe"></iframe>
</body>

JavaScript:

window.onload = function () {

    var accept_1 = 0;
    var accept_2 = 0;
    var show = document.getElementsByClassName('show')[0]


    document.getElementById("submit").onclick = function () {
        var height = parseFloat(document.getElementById("height").value)

        if (height >= 0.5 && height <= 3) {
            accept_1 = 1
        } else {
            show.innerHTML = '输入的身高不符合格式(0.5~3)'
        }
        var weight = parseFloat(document.getElementById("weight").value)



        if (weight >= 20 && weight <= 200) {
            accept_2 = 1
        } else {
            show.innerHTML = '输入的体重不符合格式(20~200)'

        }
        if (accept_1 == 1 && accept_2 == 1) {
            var BMI = (weight / (height * height)).toFixed(2);
            if (BMI < 18.5) {
                show.innerHTML = '你的BMI值为' + BMI + ',体重过轻';
                show.style.backgroundColor = 'white'
            } else if (BMI >= 18.5 && BMI < 25) {
                show.innerHTML = '你的BMI值为' + BMI + ',恭喜您,正常范围,请保持!'
                show.style.backgroundColor = 'white'
            } else if (BMI >= 25 && BMI < 30) {
                show.innerHTML = '你的BMI值为' + BMI + ',超重:体重过重'
                show.css('background-color', 'red')
                show.style.backgroundColor = 'red'
            } else if (BMI >= 30 && BMI < 35) {
                show.innerHTML = '你的BMI值为' + BMI + ',超重: I度肥胖'
                show.style.backgroundColor = 'red'
            } else if (BMI >= 35 && BMI < 40) {
                show.innerHTML = '你的BMI值为' + BMI + ',超重: II度肥胖'
                show.style.backgroundColor = 'red'
            } else if (BMI >= 40) {

                show.innerHTML = '你的BMI值为' + BMI + ',超重: III度肥胖'
                show.style.backgroundColor = 'red'
            }
        } else {
            console.log('error BMI 错误');
        }
    }
    var reset = document.getElementById('reset')
    reset.onclick = function () {
        var show = document.getElementById('show')
        show.innerHTML = '请输入身高与体重'
    }
}

jQuery:

var accept_1 = 0;
var accept_2 = 0;

$(document).ready(function () {
    $('#submit').click(() => {
        var height = parseFloat($('#height').val())
        if (height >= 0.5 && height <= 3) {
            accept_1 = 1
        } else {
            $('.show').text('输入的身高不符合格式(0.5~3)')
        }
        var weight = parseFloat($('#weight').val())
        if (weight >= 20 && weight <= 200) {
            accept_2 = 1
        } else {
            $('.show').text('输入的体重不符合格式(20~200)')
        }
        if (accept_1 == 1 && accept_2 == 1) {
            var BMI = (weight / (height * height)).toFixed(2);
            if (BMI < 18.5) {
                $(".show").html("您的BMI值" + BMI + " 体重过轻");
                $('.show').css('background-color', 'white')
            } else if (BMI >= 18.5 && BMI < 25) {
                $(".show").html("您的BMI值" + BMI + " 恭喜您,正常范围,请保持!");
                $('.show').css('background-color', 'white')
            } else if (BMI >= 25 && BMI < 30) {
                $(".show").html("您的BMI值" + BMI + "超重: 肥胖前期");
                $('.show').css('background-color', 'red')
            } else if (BMI >= 30 && BMI < 35) {
                $(".show").html("您的BMI值" + BMI + "超重: I度肥胖");
                $('.show').css('background-color', 'red')

            } else if (BMI >= 35 && BMI < 40) {
                $(".show").html("您的BMI值" + BMI + "超重: II度肥胖");
                $('.show').css('background-color', 'red')

            } else if (BMI >= 40) {
                $(".show").html("您的BMI值" + BMI + "超重: III度肥胖");
                $('.show').css('background-color', 'red')

            }
        } else {
            console.log('error BMI 错误');
        }
    })
    $('#reset').click(() => {
        $('.show').text('请输入身高与体重')
    })
})

  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

find1star

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值