利用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 相关文章推荐
js event事件的传递与冒泡处理
Dec 06 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
Javascript实现信息滚动效果
May 18 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 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入门源程序
2006/10/09 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
js 匿名调用实现代码
2009/06/19 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
Python基类函数的重载与调用实例分析
2015/01/12 Python
python获取图片颜色信息的方法
2015/03/18 Python
快速入手Python字符编码
2016/08/03 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
Python 创建守护进程的示例
2020/09/29 Python
三星美国官网:Samsung美国
2017/02/06 全球购物
技校教师求职简历的自我评价
2013/10/20 职场文书
审核会计岗位职责
2013/11/08 职场文书
大学生创业计划书的格式要求
2013/12/29 职场文书
工作人员思想汇报
2014/01/09 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
财务总监管理职责范文
2014/03/09 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
小学三年级学生评语
2014/04/22 职场文书
给校长的建议书100字
2014/05/16 职场文书
煤矿安全协议书
2014/08/20 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书