這是一篇有趣的文章，本文作者是一只單身狗，昨天別人都在過七夕，而他在奮筆疾書：用Axure做了個(gè)計(jì)算器，與你分享~

始于顏值~

始于顏值~

始于顏值~

七夕了，我們不講技巧，我們看顏值（也有可能暴露我這個(gè)直男的審美）……

本次原型制作過程主要練習(xí)函數(shù)的使用。

Tips：

• Target：獲取目標(biāo)元件對(duì)象。目標(biāo)元件是指當(dāng)前交互動(dòng)作控制的元件。
• This：獲取當(dāng)前元件對(duì)象。當(dāng)前元件是指當(dāng)前添加交互動(dòng)作的元件。
• text：獲取元件對(duì)象的文本文字。
• Math.pow(x,y) ：冪函數(shù)，計(jì)算x的y次冪。準(zhǔn)備：
  做臨時(shí)存儲(chǔ)用的元件，分別用來存儲(chǔ)“臨時(shí)數(shù)值”、“數(shù)值A(chǔ)”、“運(yùn)算符號(hào)”、“數(shù)值B”、“小數(shù)位數(shù)”。

Tips：

也可以用系統(tǒng)變量來存儲(chǔ)，使用元件的好處在練習(xí)過程中可以隨時(shí)看到值的變化，便于查找問題。

數(shù)字鍵交互：

當(dāng)按下數(shù)字鍵時(shí)，有兩種情況：

1. 輸入整數(shù)，“臨時(shí)數(shù)值”=[[Target.text*10+This.text]]；
2. 輸入小數(shù)，“臨時(shí)數(shù)值”=[[Target.text+This.text/Math.pow(10,“小數(shù)位數(shù)”)]]，并設(shè)置“小數(shù)位數(shù)”=“小數(shù)位數(shù)”+1。

Tips：

“小數(shù)位數(shù)”默認(rèn)值為0，當(dāng)點(diǎn)擊”.”時(shí)，設(shè)置“小數(shù)位數(shù)”=1，通過“小數(shù)位數(shù)”是否為0來判斷輸入的是整數(shù)還是小數(shù)。

設(shè)置“小數(shù)位數(shù)”=“小數(shù)位數(shù)”+1一定要在“臨時(shí)數(shù)值”賦值之后進(jìn)行，否則你會(huì)發(fā)現(xiàn)莫名其妙多了個(gè)0。

運(yùn)算符號(hào)鍵交互：

賦值“運(yùn)算符號(hào)”。

這里定義1=+；2=-；3=*；4=/。

Tips：

“運(yùn)算符號(hào)”默認(rèn)值為0，每次運(yùn)算結(jié)束需要重新賦值到0。

邏輯

按下數(shù)字鍵——>賦值“臨時(shí)數(shù)值”——>“運(yùn)算符號(hào)”判斷——>賦值到“數(shù)值A(chǔ)”/“數(shù)值B”——>展示

當(dāng)“運(yùn)算符號(hào)”=0時(shí)，我們將值賦予“數(shù)值A(chǔ)”；否則賦予“數(shù)值B”。

設(shè)置“數(shù)值A(chǔ)”/“數(shù)值B”交互如下：

這樣一個(gè)簡(jiǎn)單的計(jì)算就完成了，如果我們進(jìn)行連續(xù)計(jì)算呢？

將“=”的運(yùn)算結(jié)果不直接進(jìn)行展示，而是賦值到“數(shù)值A(chǔ)”，“數(shù)值A(chǔ)”的交互會(huì)自動(dòng)將值進(jìn)行展示。

這樣當(dāng)我們按下運(yùn)算符號(hào)鍵，“運(yùn)算符號(hào)”值將不為0，后續(xù)鍵入的數(shù)值則將賦值與B。

然后在按下運(yùn)算符號(hào)鍵時(shí)，模擬點(diǎn)擊一次“=”。

Tips：

增加一個(gè)臨時(shí)存儲(chǔ)用的元件用來判斷是否清除臨時(shí)變量，當(dāng)每次點(diǎn)擊運(yùn)算符號(hào)后設(shè)置為清除。

至于為什么，大家做到這步自然就懂了……（來自單身狗的報(bào)復(fù)，哈哈哈）

其他交互：

“±”=[[Target.text*-1]]

“%”=[[Target.text/100]]

案例訪問地址：

https://axhub.im/pro/32acf0e0782cceb6/phone.html

本文由 @fraidei 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖由作者提供