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:#.........完整代码请登录后点击上方下载按钮下载查看