在线测体脂率

最新推荐文章于 2021-09-14 09:33:32 发布
爱吃烧鸭蛋的叶安
最新推荐文章于 2021-09-14 09:33:32 发布
阅读量788
点赞数
本文链接：https://blog.csdn.net/c_qianxia5040/article/details/118489321
版权
效果图
<!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{
            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;
            border-radius: 6px;
            border:1px dashed #23b7cb;
            padding: 0 20px;
            margin: 20px 0;
        }
        #weight,#waist{
            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;
        }

        .tip{
            font-size: 12px;
            color: #ccc;
        }
    </style>
</head>
<body>
    <div class="container"> 
        <H2 class="title">在线测体脂</H2>
        <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="weight" placeholder="请输入体重（kg）"/>
                <br/>
                <b>腰围：</b><input id="waist" placeholder="请输入腰围（cm）"/>
                <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>
                        </tr>
                        <tr>
                            <td>1</td><td id="dateres"></td><td id="waistres"></td><td id="weightres"></td></td><td id="tizhires"></td>
                        </tr>
                    </table>
                    <div>
                        <b>正常值参考范围</b>
                        <div>成年人的体脂率正常范围分别是女性20%～25%，男性15%～18%，若体脂率过高，体重超过正常值的20%以上就可视为肥胖。运动员的体脂率可随运动项目而定。一般男运动员为7%～15%，女运动员为12%—25%。</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="line-height: 40px">体脂率是指人体内脂肪重量在人体总体重中所占的比例，又称体脂百分数，它反映人体内脂肪含量的多少。肥胖会提高罹患各种疾病的风险。例如，高血压、糖尿病、高血脂等。而打算怀孕的女性也不能忽视肥胖引起的妊娠并发症与难产的风险</div>
        <div class="rule">
            <H3>计算规则：</H3>
            <div style="padding-left: 20px;">
                a=腰围（cm）×0.74<br/>
                <b>女：</b>b=体重（kg）×0.082+34.89<br/>
                <b>男：</b>b=体重（kg）×0.082+44.74<br/>
                体脂肪重量（kg）=a－b<br/>
                体脂率=（身体脂肪总重量÷体重）×100%
            </div>
            <div class="tip">（提示：腰围为腰部最细处）</div>
        </div>
        
    </div>
    <script>
        window.onload = function(){
            var ress = document.getElementById('ress')
            if(!tizhires.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 waist = document.getElementById('waist')
        let weight = document.getElementById('weight')

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

            waistNumber = Number( waist.value )
            weightNumber = Number( weight.value )
            if(!waistNumber || !weightNumber ){
                alert ('请保证腰围、体重均已填写')
                return false
            }

            let a = waistNumber*0.74
            let b
            if(Number(sexVal)){//女
                b = Number((weightNumber * 0.082) + 34.89)
            }else{
                b = Number((weightNumber * 0.082) + 44.74)
            }
            let zhifang = a>b ? a-b :b-a
            
            let tizhi_lv = (((zhifang/weightNumber)*100).toFixed(2)) + '%'

            let date = dateFormat(new Date(),'yymmdd')
            dateres.innerHTML = date
            weightres.innerHTML = waistNumber
            waistres.innerHTML = weightNumber
            tizhires.innerHTML = tizhi_lv

            if(!tizhires.innerHTML){
                ress.style.display = 'none'
            }else{
                ress.style.display = 'block'
            }
        }
    </script>
</body>
</html>