效果图:
BMI实例
代码段:
注:CSS 与 HTML 为 jQuery、JavaScript 两种方法的通用资源
使用之前请自行引入 CSS 与 js
css:
form {
position: relative;
border: 1px solid black;
text-align: center;
margin: 0 auto;
padding: 20px 10px 5px 10px;
width: 300px;
height: 300px;
}
.head {
display: flex;
position: absolute;
top: -10px;
left: 10px;
background-color: rgb(255, 255, 255);
}
.btn {
position: relative;
top: 10px;
left: -100px;
margin-left: 20px !important;
}
.show {
position: relative;
top: 20px;
height: 180px;
border: 1px solid green;
text-align: left;
}
.iframe{
visibility: hidden;
}
HTML:
<body>
<form action="" target="myIframe">
<div class="head"> BMI计算 </div>
<div>
<label for="height">身高(m):</label>
<input type="text" name="height" id="height">
</div>
<p></p>
<div>
<label for="weight">体重(kg):</label>
<input type="text" name="weight" id="weight">
</div>
<input class="btn" type="submit" id="submit" value="提交">
<input class="btn" type="reset" id="reset" value="清除">
<div class="show">
请输入身高与体重
</div>
</form>
<iframe id="myIframe" name="myIframe" class="iframe"></iframe>
</body>
JavaScript:
window.onload = function () {
var accept_1 = 0;
var accept_2 = 0;
var show = document.getElementsByClassName('show')[0]
document.getElementById("submit").onclick = function () {
var height = parseFloat(document.getElementById("height").value)
if (height >= 0.5 && height <= 3) {
accept_1 = 1
} else {
show.innerHTML = '输入的身高不符合格式(0.5~3)'
}
var weight = parseFloat(document.getElementById("weight").value)
if (weight >= 20 && weight <= 200) {
accept_2 = 1
} else {
show.innerHTML = '输入的体重不符合格式(20~200)'
}
if (accept_1 == 1 && accept_2 == 1) {
var BMI = (weight / (height * height)).toFixed(2);
if (BMI < 18.5) {
show.innerHTML = '你的BMI值为' + BMI + ',体重过轻';
show.style.backgroundColor = 'white'
} else if (BMI >= 18.5 && BMI < 25) {
show.innerHTML = '你的BMI值为' + BMI + ',恭喜您,正常范围,请保持!'
show.style.backgroundColor = 'white'
} else if (BMI >= 25 && BMI < 30) {
show.innerHTML = '你的BMI值为' + BMI + ',超重:体重过重'
show.css('background-color', 'red')
show.style.backgroundColor = 'red'
} else if (BMI >= 30 && BMI < 35) {
show.innerHTML = '你的BMI值为' + BMI + ',超重: I度肥胖'
show.style.backgroundColor = 'red'
} else if (BMI >= 35 && BMI < 40) {
show.innerHTML = '你的BMI值为' + BMI + ',超重: II度肥胖'
show.style.backgroundColor = 'red'
} else if (BMI >= 40) {
show.innerHTML = '你的BMI值为' + BMI + ',超重: III度肥胖'
show.style.backgroundColor = 'red'
}
} else {
console.log('error BMI 错误');
}
}
var reset = document.getElementById('reset')
reset.onclick = function () {
var show = document.getElementById('show')
show.innerHTML = '请输入身高与体重'
}
}
jQuery:
var accept_1 = 0;
var accept_2 = 0;
$(document).ready(function () {
$('#submit').click(() => {
var height = parseFloat($('#height').val())
if (height >= 0.5 && height <= 3) {
accept_1 = 1
} else {
$('.show').text('输入的身高不符合格式(0.5~3)')
}
var weight = parseFloat($('#weight').val())
if (weight >= 20 && weight <= 200) {
accept_2 = 1
} else {
$('.show').text('输入的体重不符合格式(20~200)')
}
if (accept_1 == 1 && accept_2 == 1) {
var BMI = (weight / (height * height)).toFixed(2);
if (BMI < 18.5) {
$(".show").html("您的BMI值" + BMI + " 体重过轻");
$('.show').css('background-color', 'white')
} else if (BMI >= 18.5 && BMI < 25) {
$(".show").html("您的BMI值" + BMI + " 恭喜您,正常范围,请保持!");
$('.show').css('background-color', 'white')
} else if (BMI >= 25 && BMI < 30) {
$(".show").html("您的BMI值" + BMI + "超重: 肥胖前期");
$('.show').css('background-color', 'red')
} else if (BMI >= 30 && BMI < 35) {
$(".show").html("您的BMI值" + BMI + "超重: I度肥胖");
$('.show').css('background-color', 'red')
} else if (BMI >= 35 && BMI < 40) {
$(".show").html("您的BMI值" + BMI + "超重: II度肥胖");
$('.show').css('background-color', 'red')
} else if (BMI >= 40) {
$(".show").html("您的BMI值" + BMI + "超重: III度肥胖");
$('.show').css('background-color', 'red')
}
} else {
console.log('error BMI 错误');
}
})
$('#reset').click(() => {
$('.show').text('请输入身高与体重')
})
})