今早上在去公司的班車(chē)上打開(kāi)手機(jī)撥號(hào)界面，突然想怎么能用Axure把它做出來(lái)，到了公司花了半小時(shí)就做出來(lái)，然后把制作過(guò)程分享給大家。

效果描述

手機(jī)撥號(hào)，想必大家都知道，就是點(diǎn)擊數(shù)字時(shí)有按下反饋，且會(huì)組成一串手機(jī)號(hào)碼，同時(shí)按錯(cuò)數(shù)字，會(huì)有撤退按鈕刪除剛輸入的數(shù)字，效果鏈接：http://flpa2p.axshare.com

一、首先畫(huà)頁(yè)面原型

主要元件為無(wú)邊框文本框“顯示”（設(shè)置輸入文字為居中），數(shù)字按鍵“1”、“2”….（設(shè)置白色圓形背景），撤銷(xiāo)按鈕“撤銷(xiāo)”。

二、添加交互事件

1、為數(shù)字按鍵添加鼠標(biāo)按下?tīng)顟B(tài)

• 全部選中數(shù)字按鍵，在右側(cè)統(tǒng)一設(shè)置交互樣式為“鼠標(biāo)按下時(shí)，填充顏色為綠色、字體顏色為白色”，即鼠標(biāo)點(diǎn)擊時(shí)顯示綠色背景+白色文字，松開(kāi)恢復(fù)默認(rèn)狀態(tài)。

2、為數(shù)字按鍵添加“鼠標(biāo)單擊該數(shù)字按鍵時(shí)，在顯示框依次顯示單擊的數(shù)字”，即執(zhí)行“單擊數(shù)字按鍵設(shè)置顯示框文本為…”命令。

• 選中數(shù)字按鍵“1”，設(shè)置鼠標(biāo)單擊時(shí)，設(shè)置文本-選擇“顯示”文本框；
• 點(diǎn)擊fx，設(shè)置文本框顯示文本，因?yàn)槲谋究蚶锏闹凳亲兓?，我們?cè)O(shè)置局部變量LAVR1=元件文字=“顯示”，然后設(shè)置fx=[[LVAR1]]1，即上一個(gè)變量值后面再顯示剛剛單擊的數(shù)字1，注意不是[[LVAR1]]+1，那就變成加法了；
• 為其他數(shù)字按鍵也添加這個(gè)命令，設(shè)置fx=[[LVAR1]]2、[[LVAR1]]3…，這樣就完成了“鼠標(biāo)單擊數(shù)字按鍵時(shí)，在文本框依次顯示單擊的數(shù)字”。

3、設(shè)置點(diǎn)擊“撤銷(xiāo)”按鈕，文本框“顯示”會(huì)相應(yīng)刪除一個(gè)數(shù)字。也是執(zhí)行“單擊撤銷(xiāo)按鍵設(shè)置顯示框文本為…”命令。

• 選中“撤銷(xiāo)”按鈕，設(shè)置鼠標(biāo)單擊時(shí)，設(shè)置文本-選擇“顯示”文本框。
• 點(diǎn)擊fx，設(shè)置文本框顯示文本，設(shè)置局部變量LAVR1=元件文字=“顯示”，設(shè)置fx=[[LVAR1]]？？，該怎么設(shè)置呢？這時(shí)我們用到一個(gè)函數(shù)“substring(from，to)”，即從截取變量的第from位到to位字符串，舉例LVAR=123456，那截取第1位到第4位字符串LVAR.substring(1，4)=234（從第1位，不包括第1位的數(shù)字，到第4位包括第4位的數(shù)字，所以為234，而不是1234）。
• 點(diǎn)擊“撤銷(xiāo)”按鍵，文本框應(yīng)該截取0位到倒數(shù)第2位的字符串，那倒數(shù)第2位該怎么表示，這時(shí)又用到一個(gè)函數(shù)LVAR.length，即變量值字符串長(zhǎng)度，這里可以理解為字符串?dāng)?shù)字個(gè)數(shù)，那倒數(shù)第2位就表示為L(zhǎng)VAR.length-1。所以fx=[[LVAR1.substring(0,LVAR1.length-1)]]，設(shè)置好并確認(rèn)，就達(dá)到了“點(diǎn)擊撤銷(xiāo)按鈕，文本框會(huì)相應(yīng)刪除一個(gè)數(shù)字”的效果。

按下“F5”生成Html預(yù)覽一下吧！

今天主要通過(guò)局部變量和兩個(gè)函數(shù)LVAR.substring(from，to)、LVAR.length來(lái)做手機(jī)撥號(hào)，希望大家能通過(guò)練習(xí)掌握，有什么問(wèn)題大家可以一起交流學(xué)習(xí)呀。

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