利用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 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 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中模拟POST传递数据的两种方法分享
2011/09/16 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
PHP单链表的实现代码
2016/07/05 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
jQuery基础知识小结
2014/12/22 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python绘制热力图示例
2019/09/27 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
python向图片里添加文字
2019/11/26 Python
python中pop()函数的语法与实例
2020/12/01 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
请解释在new与override的区别
2012/10/29 面试题
企业管理专业个人求职信范文
2013/09/24 职场文书
节约用水的口号
2014/06/20 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
神农溪导游词
2015/02/11 职场文书