利用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不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
js函数排序的实例代码
Jul 01 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
js实现星星海特效的示例
Sep 28 Javascript
JS实现数组去重的11种方法总结
Apr 04 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
操作Oracle的php类
2006/10/09 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
Python实现多行注释的另类方法
2014/08/22 Python
深入理解python函数递归和生成器
2016/06/06 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
节能宣传周活动总结
2014/05/08 职场文书
户籍证明格式
2014/09/15 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书