今早上在去公司的班車上打開手機撥號界面，突然想怎么能用Axure把它做出來，到了公司花了半小時就做出來，然后把制作過程分享給大家。

效果描述

手機撥號，想必大家都知道，就是點擊數字時有按下反饋，且會組成一串手機號碼，同時按錯數字，會有撤退按鈕刪除剛輸入的數字，效果鏈接：http://flpa2p.axshare.com

一、首先畫頁面原型

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

二、添加交互事件

1、為數字按鍵添加鼠標按下狀態(tài)

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

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

• 選中數字按鍵“1”，設置鼠標單擊時，設置文本-選擇“顯示”文本框；
• 點擊fx，設置文本框顯示文本，因為文本框里的值是變化的，我們設置局部變量LAVR1=元件文字=“顯示”，然后設置fx=[[LVAR1]]1，即上一個變量值后面再顯示剛剛單擊的數字1，注意不是[[LVAR1]]+1，那就變成加法了；
• 為其他數字按鍵也添加這個命令，設置fx=[[LVAR1]]2、[[LVAR1]]3…，這樣就完成了“鼠標單擊數字按鍵時，在文本框依次顯示單擊的數字”。

3、設置點擊“撤銷”按鈕，文本框“顯示”會相應刪除一個數字。也是執(zhí)行“單擊撤銷按鍵設置顯示框文本為…”命令。

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

按下“F5”生成Html預覽一下吧！

今天主要通過局部變量和兩個函數LVAR.substring(from，to)、LVAR.length來做手機撥號，希望大家能通過練習掌握，有什么問題大家可以一起交流學習呀。

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