要計(jì)算這個(gè)賬單應(yīng)付金額,首先根據(jù)消費(fèi)項(xiàng)目計(jì)算出總金額,然后根據(jù)折扣率計(jì)算出折扣額,最后用總金額減掉折扣額就得到應(yīng)付金額了。本案是昆明網(wǎng)站建設(shè)小編針對局部變量和數(shù)學(xué)函數(shù)的應(yīng)用練習(xí)所做的總結(jié)。
第一步:使用文本標(biāo)簽、按鈕和水平線部件制作如圖58所示的結(jié)賬單,并按紅線提示分別給部件命名。
當(dāng)制作的原型中部件數(shù)量過多時(shí),可將關(guān)聯(lián)部件和無關(guān)部件設(shè)置為組合的方法將原型變得扁平化。如在本案例中,筆者將介紹性內(nèi)容部件全部設(shè)置為一個(gè)組合,見圖59,這樣當(dāng)我們添加用例時(shí)選擇部件會清晰很多。
第二步:選中計(jì)算按鈕,在部件【屬性】面板中雙擊【鼠標(biāo)單擊時(shí)】事件,在彈出的【用例編輯器】中新增【設(shè)置文本】動作,在右側(cè)的配置動作中勾選subtotal,然后在底部選擇【設(shè)置文本為:值】,并單擊右側(cè)的【fx】,見圖60。
(圖58)
(圖59)
(圖60)
在彈出的【編輯文本】對話框底部,單擊【添加局部變量】,分別將6道菜肴添加到局部變量中,見圖61。
繼續(xù)在【編輯文本】對話框中單擊【插入變量或函數(shù)…】,將剛剛添加的6個(gè)局部變量插入并相加,見圖62。單擊【確定】按鈕關(guān)閉【編輯文本】對話框。
(圖61)
(圖62)
這里昆明網(wǎng)站制作小編需要提醒注意的是插入表達(dá)式的格式,因?yàn)樵诖颂幰?jì)算6道菜肴相加的和,所以要使用加法運(yùn)算。在Axure中插入[[VarA+VarB]] 返回這兩個(gè)變量相加的和;如果插入[[VarA]]+[[VarB]],并不會使兩個(gè)變量進(jìn)行加法運(yùn)算,而是在兩個(gè)變量之間添加了一個(gè)加號。
此時(shí),單擊計(jì)算按鈕已經(jīng)可以計(jì)算出賬單總金額了。
繼續(xù)在【用例編輯器】中勾選discounts,并單擊下方的【fx】,在彈出的【編輯文本】對話框中單擊【添加局部變量】,將剛剛計(jì)算好的subtotal插入到局部變量中,見圖63。
(圖63)
繼續(xù)在頂部單擊【插入變量或函數(shù)…】,在下拉列表中選擇局部變量LVAR1,根據(jù)案例開始圖58給出的信息,我們知道折扣率是75%,要計(jì)算折扣額,使用:總金額-總金額*折扣率即可。所以這里的表達(dá)式設(shè)置為:LVAR1-LVAR1*0.75,見圖64,單擊【確定】按鈕關(guān)閉【編輯文本】對話框。
到這里,我們已經(jīng)計(jì)算出了總金額和折扣額,應(yīng)付金額等于:總金額減去折扣額,也就是,總金額-(總金額-總金額*折扣率)。
(圖64)
繼續(xù)在【用例編輯器】中勾選total_due,單擊下方的【fx】,在彈出的【編輯文本】對話框中進(jìn)行設(shè)置,見圖65,單擊兩次【確定】按鈕回到設(shè)計(jì)區(qū)域。
(圖65)
第三步:至此,賬單計(jì)算器案例制作完畢,在頂部的工具欄中單擊【預(yù)覽】按鈕,或者按下快捷鍵F5/Shift+Command+P,快速預(yù)覽交互效果。
當(dāng)前文章標(biāo)題:案例24:賬單計(jì)算器
當(dāng)前URL:http://51zuanshi.com.cn/news/wzzz/3471.html
上一篇:?評審開發(fā)工作