利用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之二(两种扩展)
Jun 11 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 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
使用adodb lite解决问题
2006/12/31 PHP
PHP中cookies使用指南
2007/03/16 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
写好求职信第一句话的技巧
2013/10/26 职场文书
计算机专业推荐信范文
2013/11/20 职场文书
结婚周年感言
2014/02/24 职场文书
网络信息安全承诺书
2014/03/26 职场文书
小学五年级学生评语
2014/04/22 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis