js实现身高体重bmi肥胖指数计算器效果代码-html代码-BFW代码库

js实现身高体重bmi肥胖指数计算器效果代码

代码语言：html

所属分类：其他

代码描述：js实现身高体重bmi肥胖指数计算器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
body,html {
        width:100%;
        height:100%;
        margin:0
}
.wrapper {
        width:100%;
        height:100%
}
.container {
        max-width:800px;
        margin-left:auto;
        margin-right:auto
}
.header {
        background-color:#2C2D34;
        width:100%;
        height:300px;
        position:relative
}
.logo {
        color:#F2910A;
        font-size:32px;
        position:absolute;
        top:50%;
        left:15%;
        transform:translate(-15%,-50%)
}
.logo h1 {
        padding-bottom:16px;
        text-align:center
}
.logo i {
        font-size:120px;
        padding-left:16px
}
.calc {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%)
}
.calc h2 {
        color:#F2910A;
        font-size:18px;
        text-align:left;
        margin:16px;
        margin-left:0
}
.calc .height,.calc .weight {
        width:180px;
        height:40px;
        font-size:24px;
        background:rgba(255,255,255,0.18);
        border:2px solid #F2910A;
        border-radius:10px;
        color:rgba(255,255,255,0.5)
}
.btn {
        width:120px;
        height:120px;
        box-sizing:border-box;
        border-radius:50%;
        background-color:#F2910A;
        text-align:center;
        position:absolute;
        top:50%;
        right:17%;
        transform:translate(-17%,-50%);
        cursor:pointer;
        transition:all .2s
}
.btn:hover {
        box-shadow:0 1px 6px 3px #e2a666
}
.btn:active {
        background-color:#e58a29
}
.btn h3 {
        font-size:28px;
        line-height:120px;
        letter-spacing:3px
}
.btn .result_bmi {
        font-size:14px;
        letter-spacing:2px;
        position:absolute;
        top:28px;
        left:40px;
        opacity:0
}
.return {
        width:32px;
        height:32px;
        border-radius:50%;
        position:absolute;
        top:65%;
        left:80%;
        transform:translate(-80%,-65%);
        border:2px solid #2C2D34;
        background-color:#.........完整代码请登录后点击上方下载按钮下载查看