计算体重引发的思考-优快云博客

本文展示了一个简单的HTML页面，该页面包含一个用于输入身高等数据的表单，并使用JavaScript进行实时的数据验证与处理。当用户输入数据时，程序会阻止非数字字符的输入，并在特定条件下计算并显示BIM值。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1231w</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style-type:none;}
img{border:0;}
.wrapper{width:800px;margin:0 auto;}
.wrapper p{line-height:30px;}
.wrapper input{height:20px;line-height:20px;}
</style>
</head>

<body>
<div class="wrapper">
   <form>
       <p><label>身高：</label><input type="text" value="" name = "length" id="af"/></p>
       <p><label>体重：</label><input type="text" value="" name="weight"/></p>
       <p><label>BIM：</label><input type="text" value="" name = "bim"/></p>
       <p><label>状况：</label><input type="text" value=""/></p>
   </form>
</div>
<script type="text/javascript">
var oLength = base().getName("length")[0];
var oWeight = base().getName("weight")[0];
var oBim = base().getName("bim")[0];
var flag = false;
oLength.onkeydown = oWeight.onkeydown = function(e){
   var oEvent = e || window.event;
   if(oEvent.keyCode !=8 && (oEvent.keyCode < 47 || oEvent.keyCode > 58) && (oEvent.keyCode < 95 || oEvent.keyCode > 106) ){
       flag = false;
       if(oEvent.preventDefault){
           oEvent.preventDefault();
       }else{
           oEvent.returnValue = false;
       }
   }else{
       if(this.value < 3){
           flag = true;
       }else{
           if(oEvent.preventDefault){
               oEvent.preventDefault();
           }else{
               oEvent.returnValue = false;
           }
       }
   }
}
oLength.onkeyup = oWeight.onkeyup = function(){
   if(flag == true ){
       oBim.value = oLength.value * oWeight.value;
   }
}


function base(){
   return {
       getId:function(vArg){
           var arr = [];
           for(var i=0;i<vArg.length;i++){
               arr.push(document.getElementById(vArg[i]));
           }

       },
       getName:function(vArg,parent){
           var parent = parent || document;
           return    parent.getElementsByName(vArg);
       }

   }
}

</script>
</body>
</html>