Axure中,灵活使用变量是十分重要的,接下来尝试使用Axure实现一个简易的计算机。
一、计算机绘制
显示屏幕用表单文本框,设置属性位‘只读’,避免可以直接在浏览器操作;
同时设置提示文字为‘0’,意味着计算机的初始化;
按键部分用矩形完成,调整好对应的显示效果;
二、全局变量设置
全局变量为任何部件在设置交互效果时都可以使用的变量,这里展示了部分全局变量
First 为第一个操作数;
Second 为第二个操作数;
Operation 为运算符,用以表示运算符号;
三、设置交互效果
3.1 数字按键交互
这里以数字 1 为例,通过Operation变量判断运算的数字是第一位还是第二位;
同时设置对应变量的值,并显示;
3.2 运算按键交互
此处以 + 操作为例,比较简单;
3.3 结果显示
单击 = 按键时,计算并输出结果;
结果赋给 First ,便于计算机可根据运算结果进行下一步继续操作;
要注意数据的初始化;
3.4 其他功能
此处展示的为回退功能,需要注意的是,需要调用变量中的小数位截取函数 .toFixed(),不保存小数位,否则无法实现回退效果;
更多其他功能可根据需要去完成;
四、效果预览
计算机可以正常运行,可通过左边窗口观察变量变化情况进行DEBUG操作;
五、其他
交互效果可以通过不断复制来减少工作量;
如果要实现小数的运算,需要添加全局变量 小数位A 和 小数值B,来完成操作,,同时交互条件需要添加进一步的判断;
显示效果要使用字符串截取,来完成显示 15. 这样的计算机显示效果,在此不多做缀述。