利用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——表单应用范例
Feb 20 Javascript
javascript 二维数组的实现与应用
Mar 16 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
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+mysql开发中的经验与常识小结
2019/03/25 PHP
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
深入解析Python中的WSGI接口
2015/05/11 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
python3对接mysql数据库实例详解
2019/04/30 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
会计专业自荐信
2013/12/02 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
班组长竞聘书
2014/03/31 职场文书
新年爱情寄语
2014/04/08 职场文书
企业人事任命书
2014/06/05 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
毕业证明书
2015/06/19 职场文书
四则混合运算教学反思
2016/02/23 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python