文章分享了利用Axure計(jì)算器demo的制作過程，一起來看看吧！

運(yùn)用基礎(chǔ)運(yùn)算符號(hào)，做一個(gè)簡(jiǎn)單的、可進(jìn)行有效運(yùn)算操作的計(jì)算器demo，增加學(xué)習(xí)axure的樂趣和滿足感。

這是個(gè)粗糙的gif效果，說干就干～

1、基礎(chǔ)組件設(shè)置

組件排布與命名

拖入矩形，設(shè)置矩形大小、文本、文本顏色、背景顏色（運(yùn)算符號(hào)鍵#F98D11、屏幕#202020、其他數(shù)字鍵等#CED0D2）

拖入輔助組件，判斷條件與第一個(gè)數(shù)矩形。

接著給組件命名，加減乘除運(yùn)算鍵分別命名為“加”、“減”、“乘”、“除”，小數(shù)點(diǎn)鍵命名為“點(diǎn)”，黑色屏幕矩形命名為“屏幕”，判斷條件矩形命名“判斷”，第一個(gè)數(shù)矩形命名為“第一個(gè)數(shù)”。

思路：可先拖入設(shè)置好一個(gè)矩形鍵樣式后，復(fù)制多個(gè)進(jìn)行排版，更改文本和對(duì)應(yīng)色值提高效率；判斷條件矩形用于輔助點(diǎn)擊數(shù)字鍵等后，屏幕顯示的規(guī)則（替換屏幕文本或連接屏幕文本字符串）；第一個(gè)數(shù)矩形輔助記錄參與運(yùn)算的第一個(gè)數(shù)

設(shè)置組件樣式

點(diǎn)選上方截圖部分組件，設(shè)置鼠標(biāo)按下時(shí)填充顏色變化。

點(diǎn)選上方截圖所示運(yùn)算符號(hào)，設(shè)置選中時(shí)線框粗細(xì)樣式變化，線框變粗。

2、數(shù)字鍵1、2、3…9的事件設(shè)置

點(diǎn)選數(shù)字7鍵（其他數(shù)字鍵1、2、3…、9也可），鼠標(biāo)單擊時(shí)事件，編輯條件，當(dāng)“判斷”文字等于“替換”時(shí)，設(shè)置屏幕文字等于this.text。

接著，設(shè)置判斷文字為“連接”，確定。

繼續(xù)點(diǎn)選數(shù)字7鍵，添加單擊時(shí)用例，添加條件，當(dāng)判斷文字等于“連接”時(shí)，設(shè)置屏幕文字為[[LVAR1]][[This.text]]，其中LVAR1為原屏幕文字。

思路：計(jì)算器點(diǎn)選某數(shù)字鍵，如7時(shí)，初始狀態(tài)時(shí)屏幕文字為0，點(diǎn)擊7，則屏幕文字替換為7，若再點(diǎn)擊一次7，則屏幕文字是在其7后面連接新按下的數(shù)字鍵盤文字，即顯示77。判斷矩形的文字則是用于判斷屏幕是替換文字還是連接文字。很明顯的，判斷矩形默認(rèn)值應(yīng)為“替換”，當(dāng)點(diǎn)擊下某個(gè)數(shù)字鍵后，再點(diǎn)擊，屏幕文字都應(yīng)為連接的操作，所以點(diǎn)擊數(shù)字鍵后，要設(shè)置判斷文字為“連接”。

則完成了數(shù)字鍵7的事件設(shè)置，將數(shù)字鍵7的事件，復(fù)制到其他數(shù)字鍵1、2、3、4、5、6、8、9、0上，完成這幾個(gè)鍵的事件設(shè)置。

3、修改數(shù)字鍵0的事件

點(diǎn)選數(shù)字鍵0，修改case 1事件條件，設(shè)置條件為當(dāng)判斷文字等于“替換”或屏幕文字等于“0”時(shí)，滿足任意條件，則設(shè)置屏幕為this.text。

case 2事件保持不變

思路：0是一個(gè)特殊的數(shù)字鍵，僅當(dāng)屏幕文字不為0情況，才為連接操作，否則，點(diǎn)擊0，屏幕文字依然為0。所以不理解上述寫法的小伙伴，也可以把數(shù)字鍵0的事件寫成：當(dāng)屏幕文字不等于“0”時(shí)，設(shè)置屏幕文字為為[[LVAR1]][[This.text]]，其中LVAR1為原屏幕文字，否則，設(shè)置屏幕文字等于0。

4、小數(shù)點(diǎn)鍵事件設(shè)置

點(diǎn)選小數(shù)點(diǎn)鍵，單擊時(shí)事件，設(shè)置屏幕文字為為[[LVAR1]]. 其中LVAR1為原屏幕文字。

接著，設(shè)置判斷文字為“連接”，并禁用小數(shù)點(diǎn)鍵。

思路：為什么要禁用小數(shù)點(diǎn)鍵？因?yàn)橐粋€(gè)數(shù)字最多一個(gè)小數(shù)點(diǎn)。

5、設(shè)置運(yùn)算符號(hào)（加減乘除）事件

點(diǎn)選加號(hào)鍵，單擊時(shí)，設(shè)置選中當(dāng)前元件，設(shè)置第一個(gè)數(shù)矩形文字為[[LVAR1]]，LVAR1為原屏幕文字屏幕文字。

思路：當(dāng)點(diǎn)擊運(yùn)算符號(hào)時(shí)，則參與運(yùn)算的第一個(gè)數(shù)是確定的，為當(dāng)前屏幕顯示的文字。再點(diǎn)擊其他數(shù)字鍵，則屏幕開始顯示第二個(gè)參與運(yùn)算的數(shù)字。此時(shí)需要先把第一個(gè)參與運(yùn)算的數(shù)記錄下來，這就是第一個(gè)數(shù)矩形的作用。

接著，設(shè)置判斷文字為“替換”。

再啟用小數(shù)點(diǎn)，禁用加減乘除鍵。

思路：當(dāng)點(diǎn)擊運(yùn)算符號(hào)時(shí)，屏幕要開始記錄第二個(gè)參與運(yùn)算的數(shù)字。所以判斷條件文字應(yīng)改為“替換”；若第一個(gè)數(shù)為小數(shù)情況，會(huì)禁用掉小數(shù)點(diǎn)鍵，此時(shí)應(yīng)該啟用小數(shù)點(diǎn)，因?yàn)榈诙€(gè)參與運(yùn)算的數(shù)也可以是小數(shù)；已經(jīng)確定運(yùn)算規(guī)則（加減乘除），則應(yīng)禁用掉這四個(gè)運(yùn)算符號(hào)鍵，等待到計(jì)算完成后重新啟用

此時(shí)則完成加號(hào)的事件設(shè)置，將加號(hào)的事件設(shè)置復(fù)制粘貼到減號(hào)、乘號(hào)、除號(hào)上，完成所有運(yùn)算符號(hào)鍵的事件設(shè)置。

6、等號(hào)鍵事件設(shè)置

點(diǎn)選等號(hào)鍵，單擊時(shí)事件，設(shè)置條件，當(dāng)選中狀態(tài)，加號(hào)為選中true時(shí)。

設(shè)置加號(hào)為選中時(shí)事件，屏幕文字等于[[LVAR1+LVAR2]]，LVAR1為第一個(gè)數(shù)文字，LVAR2為原屏幕文字。

接著設(shè)置判斷文字為“替換”，啟用小數(shù)點(diǎn)、加減乘除運(yùn)算鍵。

接著取消選中加減乘除運(yùn)算鍵，并確定。

確定后將上述寫好的case 1事件復(fù)制粘貼在等號(hào)鍵盤上，復(fù)制為4份。

修改第二份case 1事件，編輯條件，修改條件為減號(hào)選中時(shí)，設(shè)置屏幕文字等于[[LVAR1-LVAR2]]，LVAR1為第一個(gè)數(shù)文字，LVAR2為原屏幕文字，其他保持不變。

同理，修改第三份case 1事件，編輯條件，修改條件為乘號(hào)選中時(shí)，設(shè)置屏幕文字等于[[LVAR1*LVAR2]]，LVAR1為第一個(gè)數(shù)文字，LVAR2為原屏幕文字，其他保持不變。

修改第四份case 1事件，編輯條件，修改條件為除號(hào)號(hào)選中時(shí)，設(shè)置屏幕文字等于[[LVAR1/LVAR2]]，LVAR1為第一個(gè)數(shù)文字，LVAR2為原屏幕文字，其他保持不變。

則完成等號(hào)事件設(shè)置。

7、AC鍵事件設(shè)置

點(diǎn)選AC鍵，單擊時(shí)事件，設(shè)置屏幕文字為“0”，設(shè)置判斷文字為“替換”，啟用小數(shù)點(diǎn)、加減乘除運(yùn)算鍵，取消選中加減乘除運(yùn)算鍵，則完成AC鍵的事件設(shè)置。

此時(shí)，除正負(fù)號(hào)鍵與%號(hào)鍵外，已完成了其他所有鍵操作，并可用于運(yùn)算使用。

效果如上，大功告成～

作者：五月，微信公眾號(hào)：wuyuepd，歡迎交流學(xué)習(xí)~

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