在本章中，你将学会使用局部变量和函数创建一个BMI身体质量指数查询网站。
身体质量指数，BMI（Body Mass Index）指数，简称体质指数，是国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。
我们在健身时也常用BMI来判断我们当前需要减脂还是增重。
那么本章，我们就来学习下如何创建一个BMI身体质量指数查询网站。
项目创建
首先，创建一个新项目，命名为BMI。
基础样式-计算页
首先，我们给整个页面背景加个填充颜色。
我们在“样式”工具栏中设置背景颜色为#F2F2F2。
拖入一个“矩形1”组件，在“样式”工具栏中设置尺寸为400*500。
设置线段的线宽为0，圆角设置为8。
这样我们就得到了一个背景卡片。
拖入两个“文本标签”，更改文本标签的文字分别为“身高：”、“体重：”。
为保持美观，“身高”文本位于左上角，间距为（40，40），“体重”文本位于“身高”文本下方，距离卡片间距为（40，90），也就是距离“身高”文本30的位置。
拖入两个“文本框”组件，分别命名为“身高”、“体重”。
在“样式”工具栏中，设置都尺寸为200*30，文本字号设置为12，线段颜色调整为#E6E6E6，圆角度数调整为8，边距左边距设置为10。
然后在“交互”工具栏中，分别设置它们的提示文本为“示例：185”、“示例：60”，隐藏提示条件为“获取焦点”。
同时，还需要设置用户正在输入的效果，在“交互样式”中，选择“鼠标悬停的样式”，选择“更多样式选项”，设置“线段颜色”为#1890FF。
我们复制身高和体重的文本，把复制的内容移动至输入框右边，作为单位的文本。
这样就完成了输入框的内容。
下面我们继续完成按钮的绘制。
拖入一个“主要按钮”，修改文字为“一键查询”。
位置为距离“体重”输入框下30的位置，尺寸为200*30，内部文字字号为12，整个按钮的填充颜色为#1890FF，圆角度数为4。
拖入一个“水平线”组件，距离按钮的位置为30。
设置尺寸为400*1，线段颜色为#E6E6E6。
拖入一个“文本段落”组件，修改内部文字为：身体质量指数，是BMI（Body Mass Index）指数，简称体质指数，是国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。
设置它距离分割线和左右间距都为20，字号设置为12。
拖入一个“表格”组件，表格框架为5行2列。
整个表格距离上面的说明文字为30，单个表格尺寸为180*30。
选中整个表格，设置字体字号为12，表格线段填充颜色为#E6E6E6。
为区分表头和内容，选中第1行的1、2列，设置填充颜色为#A7D2F9。
以上，第一个页面已经搭建完成。
基础样式-结果页
下面，我们来实现结果页面的搭建。
我们选中说明文字和表格，右键，选择“转换为动态面板”。
双击动态面板进入内页。
点击“添加状态”，这样我们就得到了两个状态，并双击修改第一个状态为“计算前”，第二个状态为“计算后”。
我们选择“计算后”的状态。
拖入一个“三级标题”组件，修改文本文字为“计算结果”，并命名为“计算结果”。
设置文字字号为18号，排布方式为左右居中和上下居中，这样在结果文字变化时，仍然能保持在中间的位置。
拖入一个“文本段落”组件，距离“计算结果”文本间距为20，设置内部文字为“经检验，您的BMI结果为：偏瘦”。
设置文本段落组件的名称为“BMI结果”，设置字号为12号字，排布方式为左右居中。
拖入一个“文本标签”组件，设置文字为“BMI = 体重 / （身高）^2 ”。
设置字号为12号字，文字颜色为#AAAAAA。
以上，我们已经完成了所有页面的搭建，下面我们来实现BMI计算器的功能。
交互动作-页面切换
首先，我们需要点击“一键查询”按钮时，下面动态面板的内容从说明页面切换到结果页面。
我们给“一键查询”按钮增加交互动作，选中按钮，在右侧“交互”工具栏中选择“新建交互”，选择“单击时”，选择“设置面板状态”，目标为“动态面板”，设置状态为“计算后”。
这样，我们就实现了从计算前的状态切换到计算后的状态。
交互动作-结果计算
我们还需要有计算结果更新，我们可以使用动态面板状态切换动作来实现。
我们选中动态面板，在“交互”工具栏中，选择“新建交互”，选择“状态改变时”，选择“设置文本”，选择目标为“计算结果”，设置为“文本”。
值为：[[(LVAR1/((LVAR2/100)*(LVAR2/100))).toFixed(1)]]。
科普一个知识点。
这里我们引用了函数和局部变量，我们的BMI计算的数学公式为：体重（公斤）/身高（米）^2。
这里我们添加了2个局部变量：
LVAR1，获得的值为“元件文字”，来源于“体重”输入框。
LVAR2，获得的值为“元件文字”，来源于“身高”输入框。
我们“计算结果”的文本文字就为：体重LVAR1/(身高LVAR2*100)*(身高LVAR2*100)。
LVAR2身高*100是因为我们身高使用的单位是厘米，那么需要换成单位米。
保留小数位，我们用到了.toFixed(2)函数，保留2位小数。
赋值的方式这里就不多说了，Axure统一使用[[]]进行公式计算。
我们在浏览器中预览下效果。
现在，我们已经可以计算BMI的值了，但也发现了一个问题，我们计算后不能返回重新计算，这就意味着我们只能用一次。
这不是我们想要的效果。
交互动作-逻辑优化
我们思考一下，当用户点击“一键查询”时，我们给出结果，那么在结果面，我们“一键查询”就需要变成“重新计算”。
我们选中“一键查询”按钮，右键，选择“转换为动态面板”。
双击进入内页，我们给这个按钮也添加一个状态“计算后”。
我们将“计算前”的按钮复制过来，修改样式，按钮内容修改为“重新计算”。
在“样式”工具栏中，文本字体颜色为#AAAAAA，边框线段宽度为1，线段颜色为#E6E6E6。
最后再加入“交互”工具栏中，将交互改为点击时，动态面板切换到“计算前”。
在这里别忘了，我们是设置的是点击按钮，下面“结果”页的动态面板发生切换。
但按钮本身也是变成动态面板，我们还需要加一个交互给按钮的两个面板状态。
我们给两个动态面板命名，这样更直观看到我们给动态面板添加的交互效果。
我们在浏览器中预览下效果。
交互动作-检测结果
最后，我们还需要设置下BMI计算结果的判断。
当我们计算出来的BMI结果<18.40时，BMI检验我们是偏瘦。
这里我们需要新建一个全局变量来存储计算结果的值，在系统顶部导航栏，选择“项目”，选择“全局变量”，新建一个变量名称为bmi的变量，默认值为0。
下面我们来实现赋值。
选中“结果页”的动态面板，在“状态改变时”的交互下新增动作，选择“设置变量值”，目标为“bmi”，设置值为“LVAR3”。
同理，LVAR3是我们设置的局部变量，来源于“计算结果”文本。
至此，我们已经通过局部变量和全局变量获得了bmi的值了。
接下来，我们来判断一下检测结果。
我们引用“查询”按钮的动态面板变换作为中间件。
我们选中“查询按钮”的动态面板，在“交互”工具栏中“新建交互”，选择“状态改变时”，选择“设置文本”，目标为“BMI结果”文字，设置值为“经检测，您的BMI结果为： 偏瘦”。
同时在“状态改变时”右上角添加情形，设置两个情形：
变量值bmi>0，且变量值bmi<18.40。
同理，我们再加几个情形，并修改目标“BMI结果”文字的设置值。
我们在浏览器中运行下效果。
哈哈哈，效果不错！
为了让这个网站能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。
网站地址
BMI计算器：ricardowesley.gitee.io/bmi
快来动手试试吧！
如果本专栏对你有帮助，不妨点赞、评论、关注～
