利用Javascript实现BMI计算器


Posted in Javascript onAugust 16, 2016

前言

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能有所帮助。

Javascript 相关文章推荐
jQuery之ajax技术的详细介绍
Jun 19 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 #Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 #Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 #Javascript
JavaScript里 ==与===区别详解
Aug 16 #Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 #Javascript
总结javascript中的六种迭代器
Aug 16 #Javascript
你知道setTimeout是如何运行的吗?
Aug 16 #Javascript
You might like
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
幼儿园五一活动方案
2014/02/07 职场文书
企业公益活动策划方案
2014/08/24 职场文书
继承公证书格式
2015/01/26 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
情况说明书怎么写
2015/10/08 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
python之基数排序的实现
2021/07/26 Python
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python