在线测体脂-CSDN博客

本文链接：https://blog.csdn.net/c_qianxia5040/article/details/118421176
效果如图
在这里插入图片描述
<!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>在线计算体脂</title>
    <style>
        .title{
            width: 400px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .container{
            width: 50%;
            margin: 100px auto;
        }
        .rule{
            margin-bottom: 20px;
            line-height: 30px;
            
        }
        .count{
            line-height: 40px;
        }
        #weight,#high,#age{
            outline: none;
            border-radius: 0;
            border: none;
            border-bottom: 1px solid #ddd;
            height: 26px;
        }
        #btn{
            width: 300px;
            height: 40px;
            margin: 20px auto;
            cursor: pointer;
            border: none;
            border-radius: 20px;
            outline: none;
            background: linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%);
        }
        table{
            border-collapse: collapse;
            margin: 20px 0;
        }
        .one_table th,.one_table td{
            border: 1px solid #ddd;
            width: 160px;
            height: 40px;
            text-align: center;
        }
        
        .one_table th:first-child,.one_table td:first-child{
            width: 70px;
        }
        .two_table th,.two_table td{
            width: 260px;
            height: 40px;
            text-align: center;
        }
        .two_table th:first-child, .two_table td:first-child{
            width: 100px;
            border-right: 1px solid #ddd;
            border-top: 1px solid #ddd;
        }
        .two_table tr:first-child{
            background-color: #8DD8F8;
        }
        .two_table tr:nth-child(2){
            background-color: #ccc;
        }
        .two_table tr:nth-child(3){
            background-color: #66CC00;
        }
        .two_table tr:nth-child(4){
            background-color: #FFFF00;
        }
        .two_table tr:nth-child(5){
            background-color: #FF9900;
        }
        .rea_table{
            position: relative;
            margin-top: 70px;
            width: 100%;
        }
        .rea_table H3{
            position: absolute;
            top: -70px;
        }
        #arrow{
            position: absolute;
            left: -30px;
            /* top: 60px; */
            top: 100px;
            /* top: 145px;
            top: 186px; */
        }
    </style>
</head>
<body>
    <div class="container">
        <H2 class="title">在线测体脂</H2>
        <div class="rule">
            <H3>计算规则：</H3>
            <div style="padding-left: 20px;">
                BMI</b> = 体重/身高*身高<br/>
                女：</b>体脂 = 1.2 * BMI + 0.23*年龄 -5.4<br/>
                男：</b>体脂 = 1.2 * BMI + 0.23*年龄 - 5.4 - 10.8
            </div>
        </div>
        <div class="count">
            <H3>输入参数进行查询：</H3>
            <div style="padding-left: 20px;">
                <div id="sex">
                    <input type="radio" name="cjf" id="man" value="0">男
                    <input type="radio" name="cjf" id="women" checked="checked" value="1">女
                </div>
                <b>身高：</b><input id="high" placeholder="请输入身高（cm）"/>
                <br/>
                <b>体重：</b><input id="weight" placeholder="请输入体重（kg）"/>
                <br/>
                <b>年龄：</b><input id="age" placeholder="请输入年龄（周岁）"/>
                <br/>
                <button id="btn">计算</button>
                <div id='ress'>
                    <b>计算结果：</b>
                    <table class="one_table">
                        <tr>
                            <th>#</th><th>日期</th><th>身高</th><th>体重</th><th>年龄</th><th>BIM值</th><th>体脂</th>
                        </tr>
                        <tr>
                            <td>1</td><td id="dateres"></td><td id="heightres"></td><td id="weightres"></td><td id="ageres"></td><td id="bimres"></td><td id="tizhires"></td>
                        </tr>
                    </table>
                    <div class="rea_table">
                        <H3>BMI 中国标准</H3>
                        <img src="./images/arrow.png" alt="" id="arrow"/>
                        <table class="two_table">
                            <tr><th>分类</th><th>BMI 范围</th></tr>
                            <tr><td>偏瘦</td><td><= 18.4</td></tr>
                            <tr><td>正常</td><td>18.5 ~ 23.9</td></tr>
                            <tr><td>过重</td><td>24.0 ~ 27.9</td></tr>
                            <tr><td>肥胖</td><td>>= 28.0</td></tr>
                        </table>
                        <div>
                            <b>正常值参考范围</b>
                            <div>成年人的体脂率正常范围分别是女性20%～25%，男性15%～18%，若体脂率过高，体重超过正常值的20%以上就可视为肥胖。运动员的体脂率可随运动项目而定。一般男运动员为7%～15%，女运动员为12%—25%。</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        window.onload = function(){
            var ress = document.getElementById('ress')
            if(!heightres.innerHTML){
                ress.style.display = 'none'
            }
        }

        // 日期格式化
        function dateFormat (date, reType) {
            if(!date){ //如果date=undefined时进入
                return '';
            }else {
                date = new Date(date);
            }
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let hours = date.getHours();
            let minutes = date.getMinutes();
            let seconds = date.getSeconds();
            if (month < 10) {
                month = '0' + month;
            }
            if (day < 10) {
                day = '0' + day;
            }
            if (hours < 10) {
                hours = '0' + hours
            }
            if (minutes < 10) {
                minutes = '0' + minutes;
            }
            if (seconds < 10) {
                seconds = '0' + seconds;
            }
            let t = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
            if(reType == 'yymmdd'){ 
                t = year + '-' + month + '-' + day;
            }else if(reType == 'yymm'){ 
                t = year + '-' + month;
            }else if(reType == 'yy'){ 
                t = year;
            };
            return t;
        }

        let btn = document.getElementById('btn')
        let weight = document.getElementById('weight')
        let high = document.getElementById('high')
        let age = document.getElementById('age')
        let bim = document.getElementById('bim')
        let result = document.getElementById('result')

        var sexVal = 1
        document.getElementById('sex').addEventListener('click',function(e){
            if(e.target.tagName=="INPUT"){
                sexVal = e.target.value
            }
        })
        
        let weightNumber,highNumber
        btn.onclick = function(){
            let dateres = document.getElementById('dateres') 
            let heightres = document.getElementById('heightres') 
            let weightres = document.getElementById('weightres') 
            let bimres = document.getElementById('bimres') 
            let tizhires = document.getElementById('tizhires') 
            let arrow = document.getElementById('arrow') 

            weightNumber = Number( weight.value )
            highNumber = Number( high.value )/100
            ageNumber = Number( age.value )

            if(!weightNumber || !highNumber || !ageNumber){
                alert ('请保证体重、身高、年龄均已填写')
                return false
            }

            var BMI = weightNumber/(highNumber*highNumber)
            if(BMI < 18.4 || BMI == 18.4){
                arrow.style.top = '60px'
            }else if(BMI > 18.5 && BMI < 23.9){
                arrow.style.top = '100px'
            }else if(BMI > 24 && BMI < 27.9){
                arrow.style.top = '145px'
            }else if(BMI > 28 || BMI == 28){
                arrow.style.top = '186px'
            }
            let tizhi
            if(Number(sexVal)){//女
                tizhi = (1.2 * BMI) + (0.23*ageNumber) -5.4
            }else{
                tizhi = (1.2 * BMI) + (0.23*ageNumber) -5.4 -10.8
            }

            let date = dateFormat(new Date(),'yymmdd')
            dateres.innerHTML = date
            heightres.innerHTML = highNumber
            weightres.innerHTML = weightNumber
            ageres.innerHTML = ageNumber
            bimres.innerHTML = BMI.toFixed(2)
            tizhires.innerHTML = tizhi.toFixed(2)

            

            if(!heightres.innerHTML){
                ress.style.display = 'none'
            }else{
                ress.style.display = 'block'
            }
        }
    </script>
</body>
</html>
使用到的图片
在这里插入图片描述