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

代码语言：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:#F2910A;
	z-index:100;
	cursor:pointer;
	opacity:0
}
.return i {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%)
}
.result_text {
	font-size:32px;
	font-weight:800;
	letter-spacing:2px;
	position:absolute;
	top:50%;
	left:90%;
	transform:translate(-50%,-50%);
	opacity:0
}
.content {
	background-color:#eee;
	height:500px
}
.content h2 {
	font-size:24px;
	text-align:center;
	padding:32px
}
.content ul li {
	background-color:#fff;
	padding:8px 8px;
	width:100%;
	height:100%
}
.content ul li span {
	display:inline-block;
	line-height:60px;
	font-size:20px;
	padding:0 8px
}
.footer {
	width:100%;
	height:90px;
	background-color:#F2910A;
	position:relative
}
.footer .logo {
	position:absolute;
	color:#2C2D34;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	margin:8px
}
.footer .logo i {
	font-size:60px;
	display:inline-block
}
.footer .logo h1 {
	font-size:24px;
	display:inline-block
}
.ideal.btn {
	border:6px solid #86D73F;
	background-color:#2C2D34;
	color:#86D73F
}
.ideal.btn .result_bmi {
	opacity:1
}
.ideal.btn:hover {
	box-shadow:none
}
.ideal.btn:active {
	background-color:inherit
}
.ideal.return {
	background-color:#86D73F;
	opacity:1
}
.ideal.return i {
	color:#2C2D34
}
.ideal.result_text {
	color:#86D73F;
	opacity:1;
	border:0
}
.underweight.btn {
	border:6px solid #31baf9;
	background-color:#2C2D34;
	color:#31baf9
}
.underweight.btn .result_bmi {
	opacity:1
}
.underweight.btn:hover {
	box-shadow:none
}
.underweight.btn:active {
	background-color:inherit
}
.underweight.return {
	background-color:#31baf9;
	opacity:1
}
.underweight.return i {
	color:#2C2D34
}
.underweight.result_text {
	color:#31baf9;
	opacity:1;
	border:0
}
.overweight.btn {
	border:6px solid #FF982D;
	background-color:#2C2D34;
	color:#FF982D
}
.overweight.btn .result_bmi {
	opacity:1
}
.overweight.btn:hover {
	box-shadow:none
}
.overweight.btn:active {
	background-color:inherit
}
.overweight.return {
	background-color:#FF982D;
	opacity:1
}
.overweight.return i {
	color:#2C2D34
}
.overweight.result_text {
	color:#FF982D;
	opacity:1;
	border:0
}
.light_fat.btn {
	border:6px solid #FF6C03;
	background-color:#2C2D34;
	color:#FF6C03
}
.light_fat.btn .result_bmi {
	opacity:1
}
.light_fat.btn:hover {
	box-shadow:none
}
.light_fat.btn:active {
	background-color:inherit
}
.light_fat.return {
	background-color:#FF6C03;
	opacity:1
}
.light_fat.return i {
	color:#2C2D34
}
.light_fat.result_text {
	color:#FF6C03;
	opacity:1;
	border:0
}
.medium_fat.btn {
	border:6px solid #ff6005;
	background-color:#2C2D34;
	color:#ff6005
}
.medium_fat.btn .result_bmi {
	opacity:1
}
.medium_fat.btn:hover {
	box-shadow:none
}
.medium_fat.btn:active {
	background-color:inherit
}
.medium_fat.return {
	background-color:#ff6005;
	opacity:1
}
.medium_fat.return i {
	color:#2C2D34
}
.medium_fat.result_text {
	color:#ff6005;
	opacity:1;
	border:0
}
.over_fat.btn {
	border:6px solid #FF1200;
	background-color:#2C2D34;
	color:#FF1200
}
.over_fat.btn .result_bmi {
	opacity:1
}
.over_fat.btn:hover {
	box-shadow:none
}
.over_fat.btn:active {
	background-color:inherit
}
.over_fat.return {
	background-color:#FF1200;
	opacity:1
}
.over_fat.return i {
	color:#2C2D34
}
.over_fat.result_text {
	color:#FF1200;
	opacity:1;
	border:0
}
.li_ideal {
	border-left:8px solid #86D73F
}
.li_underweight {
	border-left:8px solid #31baf9
}
.li_overweight {
	border-left:8px solid #FF982D
}
.li_light_fat {
	border-left:8px solid #FF6C03
}
.li_medium_fat {
	border-left:8px solid #ff6005
}
.li_over_fat {
	border-left:8px solid #FF1200
}

    </style>
</head>

<body>
    <script src="http://cdn.bootstrapmb.com/console-ban.min.js"></script>
    <!-- partial:index.partial.html -->
    <div class="wrapper">
        <div class="header">
            <div class="container">
                .........完整代码请登录后点击上方下载按钮下载查看