案例24:账单计算器

  • 2022-05-26 15:01:28
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

要计算这个账单应付金额,首先根据消费项目计算出总金额,然后根据折扣率计算出折扣额,最后用总金额减掉折扣额就得到应付金额了。本案是昆明网站建设小编针对局部变量和数学函数的应用练习所做的总结。

第一步:使用文本标签、按钮和水平线部件制作如图58所示的结账单,并按红线提示分别给部件命名。

当制作的原型中部件数量过多时,可将关联部件和无关部件设置为组合的方法将原型变得扁平化。如在本案例中,笔者将介绍性内容部件全部设置为一个组合,见图59,这样当我们添加用例时选择部件会清晰很多。

第二步:选中计算按钮,在部件【属性】面板中双击【鼠标单击时】事件,在弹出的【用例编辑器】中新增【设置文本】动作,在右侧的配置动作中勾选subtotal,然后在底部选择【设置文本为:值】,并单击右侧的【fx】,见图60。

11.jpg

(图58)

11.jpg

(图59)

11.jpg

(图60)

在弹出的【编辑文本】对话框底部,单击【添加局部变量】,分别将6道菜肴添加到局部变量中,见图61。

继续在【编辑文本】对话框中单击【插入变量或函数…】,将刚刚添加的6个局部变量插入并相加,见图62。单击【确定】按钮关闭【编辑文本】对话框。

11.jpg

(图61)

11.jpg

(图62)

这里昆明网站制作小编需要提醒注意的是插入表达式的格式,因为在此处要计算6道菜肴相加的和,所以要使用加法运算。在Axure中插入[[VarA+VarB]] 返回这两个变量相加的和;如果插入[[VarA]]+[[VarB]],并不会使两个变量进行加法运算,而是在两个变量之间添加了一个加号。

此时,单击计算按钮已经可以计算出账单总金额了。

继续在【用例编辑器】中勾选discounts,并单击下方的【fx】,在弹出的【编辑文本】对话框中单击【添加局部变量】,将刚刚计算好的subtotal插入到局部变量中,见图63。

11.jpg

(图63)

继续在顶部单击【插入变量或函数…】,在下拉列表中选择局部变量LVAR1,根据案例开始图58给出的信息,我们知道折扣率是75%,要计算折扣额,使用:总金额-总金额*折扣率即可。所以这里的表达式设置为:LVAR1-LVAR1*0.75,见图64,单击【确定】按钮关闭【编辑文本】对话框。

到这里,我们已经计算出了总金额和折扣额,应付金额等于:总金额减去折扣额,也就是,总金额-(总金额-总金额*折扣率)。

12.png

(图64)

继续在【用例编辑器】中勾选total_due,单击下方的【fx】,在弹出的【编辑文本】对话框中进行设置,见图65,单击两次【确定】按钮回到设计区域。

11.jpg

(图65)

第三步:至此,账单计算器案例制作完毕,在顶部的工具栏中单击【预览】按钮,或者按下快捷键F5/Shift+Command+P,快速预览交互效果。


当前文章标题:案例24:账单计算器

当前URL:http://www.lyjtt.cn/news/wzzz/3471.html

上一篇:​评审开发工作

下一篇:案例25:模拟手机按键输入的第一步

网站建设、抖音推广、头条推广、微信朋友圈推广、快手推广专线:15368242187(微信同号)