axure 点击按钮弹出框_Axure制作计算器（可使用 仿iOS）

用Axure来制作一个可使用的计算器，可以深入的学习一下Axure整个事件系统，在国外的产品设计圈很流行，今天就给大家分享一下制作过程，大家快去动手做一个吧~

咱们先看一下效果：

完整版体验地址：

http://axure123.com/calc/

（已手机适配）

一、图像设计部分

这部分比较简单，咱们参考iOS原生的计算器，图形如下，统一用基本图形，矩形+圆形。

从上到下一共四个部分：

结果展示区，运算符，数字，其他功能（清零/小数点）

二、变量与事件说明：

1、涉及到的变量说明：

①全局变量

Calc：用来记录当前的运算符 + - x ÷，分别用 1 2 3 4记录，0代表运算符为空

TmpNum：用来存储“点击运算符之前”输入的数字

Flg：用来标记上次输入的是数字还是运算符，如果是数字则为0，运算符为1

②局部变量：

LVAR1：用于获取当前展示的结果数字（Result框的值），后续可用于保存到TmpNum，或参与计算

另外这里还用到了一个函数，concat，用于在变量后连接一个字符串，LVAR1.concat("123")，代表把123字符串连接到LVAR1变量后。

2、数字区事件： 0~9

每次点击需要做如下判断

① 判断当前输出结果是否为0，如果是0，则替换为点击的数字。

② 判断前次输入，如果击了运算符，则数字重新累计，反之继续累加

数字点击的case

3、运算符事件： + - x ÷

每次点击需要做如下判断

① 判断前次输入，如果是运算符，则设置calc=对应运算符

② 判断前次输入，如果不是运算符，则TmpNum = 展示数字，设置calc=对应运算符

运算符case

4、其他事件：

①等号=：判断运算符， 计算输出结果 = TmpNum 运算符 当前展示数。

等于号的case

②小数点：点击后“.”连接在前一个数字后（这里简化处理）。

小数点的case

③AC：清空所有计数，清空运算符

AC按钮的case

好了，运行一下，一个计算器就这样完成了，还挺有意思的吧。

---

当然，这个计算器并不完美，还有很多问题可以优化，比如：连续运算，小数点，iOS的+/-%等等，下边说一下后续优化的思路，感兴趣的同学可以继续。

提升1：连续运算的设计思路：

每次点击“运算符”按钮时，需要判断前一个“运算符”是否已经计算完毕

①如果已经计算（点击过=进行计算），则只进行替换运算符

②如果还没进行计算，需要先进行结果运算，再进行赋值运算符

如下case以运算符“+”为例进行说明：

CASE1：

条件1：判断前一项输入是否为数字（Flg=0）

条件2：判断当前运算符是否为空（Calc=0）

执行1：把用户输入的数据存储起来（TmpNum），用来后续运算使用

执行2：设置当前输入为“运算符”（Flg=1）

执行3：设置当前运算符为+（Calc=1）

CASE2~5：

条件1：判断前一项输入是否为数字（Flg=0）

条件2：如果当前运算符为“+”（Calc=1），其他运算符要对应赋值（2~4）

执行1：对现有数据进行计算，并输出结果到Result展示

执行2：设置当前输入为“运算符”（Flg=1）

执行3：设置当前运算符为“+”（Calc=1），其他运算符要对应赋值（2~4）

提升2：按钮【+/-】 的实现：

【+/- 】用来转换正负值，设计思路：Result = 0-Result

case如下：

提升3：按钮【%】 的实现：

【%】用来计算百分比，设计思路：每次点击Result = Result/100

case如下：

提升4：按钮【.】 的优化：

小数点应只能点击一次，优化思路：

每次点击【.】判断Result中是否已经包含 小数点，只有在没有小数点的情况下输入。

case如下：

至此，一款仿iOS版本的计算器（完整版）就完成了，快去试试吧。

完整版体验地址（手机适配）：

http://axure123.com/calc/