利用Javascript实现BMI计算器

前言

BMI指数(英文为Body Mass Index)，是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准，当我们需要比较及分析一个人的体重对于不同高度的人所带来的健康影响时，BMI值是一个中立而可靠的指标。本文将介绍如何用JavaScript实现这个计算器，下面一起看看。

话不多说，直接上代码

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>BMI计算器</title>
</head>
<head>
<script>
  var BMI={};
 BMI.getBMI=function(a,b){
    var bmi=b/((a/100)*(a/100));
    return bmi;
  };
  BMI.idealweight=function(a){
    var x=(a-100)*0.9;
    return x;
  };
  function Cal(form){
    var a=eval(form.height.value);
    var b=eval(form.weight.value);
    var bmi=eval(form.BMI.value);
    var bmiValue =BMI.getBMI(a,b);
    BMI.disp_alert(bmiValue );
    form.IW.value=BMI.idealweight(a);
    form.BMI.value= bmiValue ;
  }
  BMI.disp_alert = function(bmi){
    if (bmi < 18.5)
    {
      alert("你的体重太轻,要多吃点哟!");
    }
    else if (bmi >= 18.5 && bmi < 25)
    {
      alert("亲,你的体重正常,要继续保持哟!");
    }
    else if (bmi >= 25 && bmi< 30)
    {
      alert("亲,您的体重过重,要减肥了!");
    }
    else
    {
      alert("亲,你确实要减肥了!");
    }
  }
</script>
</head>
<body>
<form method=post>
你的身高(cm):<input type="text" name="height"><br>
  <br/>
你的体重(kg):<input type="text" name="weight"><br>
  <br/>
<input type="button" value="开始计算" onclick="Cal(this.form)">
  <br/>
  <br/>
  你的理想体重:<input type="text" name="IW"><br/>
  <br/>
  您的BMI:<input type="text" name="BMI">
</form>
</body>
</html>

总结

以上就是用Javascript实现BMI计算器的全部内容，很简单吧，感兴趣的朋友可以自己动手实践起来哦，希望对大家使用JavaScript能有所帮助。

赞 (0)

相关推荐

  • Javascript 实现简单计算器实例代码

    Javascript 实现简单计算器实例代码

    效果图: 刚开始做时没考虑到清零和退格两个功能,嘻嘻,后来加的整体与传统计算器比有点小瑕疵. 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js简单计算器</title> <style type="text/css"> *{ margin:0px; padding:0px; } input{ margi

  • JS实现简单的二元方程计算器功能示例

    本文实例讲述了JS实现简单的二元方程计算器功能.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>二元方程</TITLE> <META NAME="Author" CONTENT=""> <META NAME="

  • javascript实现简单的可随机变色网页计算器示例

    javascript实现简单的可随机变色网页计算器示例

    本文实例讲述了javascript实现简单的可随机变色网页计算器.分享给大家供大家参考,具体如下: 该程序能实现简单的加.减.乘.除.求余,页面还添加了随机变换颜色的功能. 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 2 </TITLE> <META

  • JavaScript计算器网页版实现代码分享

    JavaScript网页计算器代码,该计算器是用DW写的! HTML篇 <html <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>计算器</title> <link href="style/calculator.css" rel="stylesheet&qu

  • 基于AngularJS实现iOS8自带的计算器

    基于AngularJS实现iOS8自带的计算器

    前言 首先创建angularjs的基本项目就不说了,最好是利用yeoman这个脚手架工具直接生成,如果没有该环境的,当然也可以通过自行下载angularjs的文件引入项目. 实例详解 main.js是项目的主要js文件,所有的js都写在这个文件中,初始化之后,该文件的js代码如下 angular .module('calculatorApp', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch'

  • 简易的JS计算器实现代码

    简易的JS计算器实现代码

    看看手机中的计算器,分为普通计算器和科学计算器 自认脑袋不够大,就实现一个普通版本的吧(支持正负数加减乘除等基本连续的运算,未提供括号功能) 看看图示效果: 一.知识准备 1+1 = ? 正常来说,我们看到这个表达式都知道怎么运算,知道运算结果 但计算机不一样,计算机无法识别出这串表达式,它只能识别特定的规则:前缀表达式+ 1 1 或后缀表达式1 1 + 举个栗子 (3 + 4) × 5 - 6 就是中缀表达式 - × + 3 4 5 6 前缀表达式 3 4 + 5 × 6 - 后缀表达式 所以

  • 简单实现JS计算器功能

    简单实现JS计算器功能

    该计算器功能: 1.校验:小数点,重复计算,以及大量更符合用户体验的操作. 2.能够从键盘输入. 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type

  • JS键盘版计算器的制作方法

    本文实例为大家分享了js制作计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #show { width: 232px; height: 80px; color: white; border-radius:

  • Javascript 实现计算器时间功能详解及实例（二）

    Javascript 实现计算器时间功能详解及实例（二）

    Javascript 计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) Javascript计算器 -> 添加时间在屏显区左上角添加时间显示 效果图如下: 代码 初始化 // 计算器初始化 Calculator.prototype.init = function () { this.addTdClick(); // 时间显示 this.showDate(); }; 时间显示 // 在屏显区左上角显示时间日期 Calculator

  • JS 实现计算器详解及实例代码（一）

    JS 实现计算器详解及实例代码（一）

    Javascript 实现计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) 小型JavaScript计算器 自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理. 总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码: 面板(main-board) 面板

  • 简单的js计算器实现

    本文实例为大家分享了js计算器实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body > <input type='text' id='txt1' /> <select id='select'> <option val

  • 原生JavaScript制作计算器

    原生JavaScript制作计算器

    原生JavaScript制作计算器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--第一个数X--> X:<input type="text" id="inp1" value="" /&g

随机推荐