Axure中,灵活使用变量是十分重要的,接下来尝试使用Axure实现一个简易的计算机。


一、计算机绘制

Axure——简易计算机、变量的使用

显示屏幕用表单文本框,设置属性位‘只读’,避免可以直接在浏览器操作;

同时设置提示文字为‘0’,意味着计算机的初始化;

按键部分用矩形完成,调整好对应的显示效果;


二、全局变量设置

全局变量为任何部件在设置交互效果时都可以使用的变量,这里展示了部分全局变量

Axure——简易计算机、变量的使用

First 为第一个操作数;

Second 为第二个操作数;

Operation 为运算符,用以表示运算符号;


三、设置交互效果

3.1 数字按键交互

Axure——简易计算机、变量的使用

这里以数字 为例,通过Operation变量判断运算的数字是第一位还是第二位;

同时设置对应变量的值,并显示;


3.2 运算按键交互

Axure——简易计算机、变量的使用

此处以 + 操作为例,比较简单;


3.3 结果显示

Axure——简易计算机、变量的使用

单击 = 按键时,计算并输出结果;

结果赋给 First ,便于计算机可根据运算结果进行下一步继续操作;

要注意数据的初始化;


3.4 其他功能

Axure——简易计算机、变量的使用

此处展示的为回退功能,需要注意的是,需要调用变量中的小数位截取函数 .toFixed(),不保存小数位,否则无法实现回退效果;

更多其他功能可根据需要去完成;


四、效果预览

Axure——简易计算机、变量的使用

计算机可以正常运行,可通过左边窗口观察变量变化情况进行DEBUG操作;


五、其他

交互效果可以通过不断复制来减少工作量;

如果要实现小数的运算,需要添加全局变量 小数位A小数值B,来完成操作,,同时交互条件需要添加进一步的判断;

显示效果要使用字符串截取,来完成显示 15.  这样的计算机显示效果,在此不多做缀述。

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-11-27
  • 2021-05-26
  • 2021-12-28
  • 2022-01-15
  • 2022-12-23
猜你喜欢
  • 2021-04-07
  • 2022-12-23
  • 2021-12-02
  • 2021-06-27
  • 2022-12-23
  • 2021-04-30
相关资源
相似解决方案