bootstrap+javascript制作体重标准计算器

一、表单编辑

使用bootstrap可以快速创建表单样式。

needs-validation 可以验证表单，如果验证不通过，表单不会提交；
onSubmit="return false;"使得表单提交不会刷新页面；
下方js代码是用来控制表单验证；

<div class="container">
	<div class="row" id="app">
		<div class="col-4">
				<form action="" class="needs-validation" onSubmit="return false;">
				  <div class="form-group">
					   <h2 class="text-center">体型</h2>
					   <label for="s_height">年龄:</label>
					   <input type="number" class="form-control" placeholder="输入周岁" id="s_age" min="16" max="39" required>
						<label for="s_height">身高（cm）:</label>
						<input type="number" class="form-control" placeholder="输入身高" id="s_height" min="160" max="195" required>
				  </div>
				  <div class="form-group">
						<label for="s_weight">体重（kg）:</label>
						<input type="number" class="form-control" placeholder="输入体重" id="s_weight" min="45" max="100" required>
				  </div>
				  <button  class="btn btn-primary" id="compute1" onclick="compute_result1()">计算</button>
					<h1 id="result1"></h1>
					</form>
		</div>
	</div>
	<script>
	(function() {
			  'use strict';
			  window.addEventListener('load', function() {
				// 获取表单验证样式
				var forms = document.getElementsByClassName('needs-validation');
				// 循环并禁止提交
				var validation = Array.prototype.filter.call(forms, function(form) {
				  form.addEventListener('submit', function(event) {
					if (form.checkValidity() === false) {
					  event.preventDefault();
					  event.stopPropagation();
					}
					form.classList.add('was-validated');
				  }, false);
				});
			  }, false);
			})();
	</script>

二、js代码编写

function compute_result1(){
	var height=document.getElementById("s_height").value;
	var weight=document.getElementById("s_weight").value;
	var result=(weight/(height*height))*10000;
	var age=document.getElementById("s_age").value;
	if (age<=24){
		if (result<=25.9 && result>=18.5){
			document.getElementById("result1").innerHTML="合格";
			
		}
		else{document.getElementById("result1").innerHTML="不合格";}
		
	}	
	else if(age>24 && age<30){
		if (result<=26.9 && result>=18.5){
			document.getElementById("result1").innerHTML="合格";
			
		}
		else{document.getElementById("result1").innerHTML="不合格";}
		
	}
	else if(age>29 && age<40){
		if (result<=27.9 && result>=18.5){
			document.getElementById("result1").innerHTML="合格";
			
		}
		else{document.getElementById("result1").innerHTML="不合格";}
		
	}
	else if(age>39 && age<50){
		if (result<=28.9 && result>=18.5){
			document.getElementById("result1").innerHTML="合格";
			
		}
		else{document.getElementById("result1").innerHTML="不合格";}
		
	}
	else if(age>49 && age<60){
		if (result<=29.4 && result>=18.5){
			document.getElementById("result1").innerHTML="合格";
			
		}
		else{document.getElementById("result1").innerHTML="不合格";}
		
	}
	else if(age>=60){
		if (result<=29.9 && result>=18.5){
			document.getElementById("result1").innerHTML="合格";
			
		}
		else{document.getElementById("result1").innerHTML="不合格";}
		
	}
		
	}