Axure-RP-8-交互原型設(shè)計(jì)案例教程第11章

1、第11章 變量和函數(shù)Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）微課版眾所周知，常數(shù)就是固定不變的數(shù)值。與常數(shù)相反，變量則是指變化的信息或數(shù)據(jù)。在Axure RP中，變量可以用來(lái)存儲(chǔ)數(shù)據(jù)，也可以用來(lái)傳遞數(shù)據(jù)。根據(jù)變量使用的范圍，可以將其分為全局變量、局部變量和函數(shù)。全局變量對(duì)整個(gè)原型都有效，如果想將數(shù)據(jù)從一個(gè)元件傳遞到另一個(gè)元件或者從一個(gè)頁(yè)面?zhèn)鬟f到另一個(gè)頁(yè)面中就要用到全局變量。鑒于此，在一個(gè)原型中，全局變量的名稱不要出現(xiàn)重復(fù)的情況。局部變量只能在某個(gè)元件的某個(gè)動(dòng)作中有效，離開(kāi)這個(gè)動(dòng)作，局部變量就無(wú)效了，所以，在一個(gè)原型中，局部變量的名稱是可以重復(fù)使用的。由于函數(shù)可以在原型中獲取日期、時(shí)

2、間、窗口寬度和高度、鼠標(biāo)指針位置、頁(yè)面名稱等變化的信息數(shù)據(jù)，所以可以看作是一種特殊的變量，非常實(shí)用。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.1 變量11.1.1 變量基礎(chǔ)在Axure RP 中創(chuàng)建全局變量一般有兩種方法。執(zhí)行【項(xiàng)目】【全局變量】命令。在【用例編輯】對(duì)話框中的某些動(dòng)作中可以設(shè)置全局變量值，如圖11-1所示。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.1 變量11.1.2 全局變量圖 11-1 在【用例編輯】對(duì)話框中新建全局變量下面通過(guò)一個(gè)小案例來(lái)學(xué)習(xí)全局變量的用法。在本例中，在文本框中輸入完文本并單擊提交按鈕后，

3、頁(yè)面會(huì)跳轉(zhuǎn)到另一個(gè)頁(yè)面并顯示剛才輸入的文本。（1）在主頁(yè)頁(yè)面中創(chuàng)建一個(gè)文本標(biāo)簽、一個(gè)文本框和一個(gè)提交按鈕，如圖11-2 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.1 變量11.1.2 全局變量圖11-2 創(chuàng)建的元件（2）選擇提交按鈕元件，在右邊的【屬性】子面板中雙擊【鼠標(biāo)單擊時(shí)】事件，在打開(kāi)的【用例編輯】對(duì)話框中添加一個(gè)【設(shè)置變量值】動(dòng)作，在右側(cè)的【配置動(dòng)作】欄中選擇程序默認(rèn)創(chuàng)建的全局變量，在下方設(shè)置全局變量值為“元件文字”，右側(cè)的元件設(shè)置為文本框，如圖11-3 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.1 變量1

4、1.1.2 全局變量圖 11-3 設(shè)置全局變量參數(shù)（3）接著上面的對(duì)話框繼續(xù)添加一個(gè)新動(dòng)作【彈出窗口】，在右側(cè)設(shè)置打開(kāi)頁(yè)為頁(yè)面1，如圖11-4所示。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.1 變量11.1.2 全局變量圖 11-4 設(shè)置【彈出窗口】動(dòng)作（4）用例設(shè)置完成后，在頁(yè)面1 中添加一個(gè)文本標(biāo)簽和矩形元件，如圖11-5 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.1 變量11.1.2 全局變量圖 11-5 頁(yè)面1 中的文本標(biāo)簽和矩形元件（5）在頁(yè)面1 中添加一個(gè)【頁(yè)面載入時(shí)】事件，在打開(kāi)的對(duì)話框中添加一個(gè)【設(shè)置文本

5、】動(dòng)作，在【配置動(dòng)作】欄中選擇矩形元件，在下方的“設(shè)置文本為”參數(shù)中選擇全局變量值，如圖11-6所示。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.1 變量11.1.2 全局變量圖 11-6 設(shè)置【設(shè)置文本】動(dòng)作設(shè)置完成后，返回主頁(yè)并按【F5】鍵瀏覽網(wǎng)頁(yè)，在文本框中輸入文本，如圖11-7 所示。單擊【提交】按鈕，即可彈出如圖11-8 所示的彈出窗口。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.1 變量11.1.2 全局變量圖 11-7 在文本框中輸入文本圖11-8 彈出窗口中的信息局部變量通常是在【用例編輯】對(duì)話框中借助于動(dòng)作中的f

6、x 按鈕創(chuàng)建的。例如，在【設(shè)置文本】動(dòng)作的參數(shù)欄中可以找到fx 按鈕，如圖11-9 所示。單擊該按鈕后會(huì)打開(kāi)【編輯文本】對(duì)話框，在該對(duì)話框的底部位置單擊“添加局部變量”即可定義局部變量，如圖11-10 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.1 變量11.1.3 局部變量Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.1 變量11.1.3 局部變量圖 11-9 動(dòng)作參數(shù)欄中的fx 按鈕圖 11-10 自定義局部變量單擊“添加局部變量”超鏈接會(huì)添加一個(gè)以“LVAR”+數(shù)字序號(hào)命名的局部變量，在“=”右側(cè)可以指定賦給該局部變量的

7、元件以及元件的選項(xiàng)，如圖11-11 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.1 變量11.1.3 局部變量圖 11-11 自定義變量選項(xiàng)下面舉例說(shuō)明這兩個(gè)函數(shù)的含義。（1）在主頁(yè)頁(yè)面上創(chuàng)建一個(gè)矩形和一個(gè)圓形，分別以其形狀命名，如圖11-12 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.1 元件函數(shù)圖 11-12 創(chuàng)建的兩個(gè)圖形元件（2）先選擇左邊的矩形元件，這就是所謂的當(dāng)前元件（This），在右側(cè)的【屬性】子面板中添加【鼠標(biāo)單擊時(shí)】事件，在打開(kāi)的【用例編輯】對(duì)話框中指定動(dòng)作為【設(shè)置文本】，在配置動(dòng)

8、作中選擇圓形元件，這就是所謂的目標(biāo)元（Target），如圖11-13 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.1 元件函數(shù)圖 11-13 添加【設(shè)置文本】動(dòng)作（3）單擊【用例編輯】對(duì)話框右下角的fx 按鈕，插入【This】和【Target】，可以在該變量前后添加自己想要的文本。按【回車鍵】可以直接換行，如圖11-14 所示。設(shè)置完成后，按【F5】鍵預(yù)覽。在瀏覽器中單擊左邊的矩形，會(huì)在右側(cè)的圓形上顯示相應(yīng)的文本，如圖11-15 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.1 元件函

9、數(shù)圖 11-14 添加的兩個(gè)函數(shù)圖11-15 當(dāng)前和目標(biāo)元件預(yù)覽效果頁(yè)面函數(shù)只包括一個(gè)【PageName】變量，通過(guò)該變量可以獲取某個(gè)頁(yè)面的名稱，頁(yè)面的名稱就是在【頁(yè)面】面板中命名的頁(yè)面。下面舉例說(shuō)明【PageName】的使用方法：（1）新建一個(gè)文檔，將默認(rèn)的4 個(gè)頁(yè)面重新命名為如圖11-16 所示。（2）新建一個(gè)母版，在母版頁(yè)面中創(chuàng)建兩個(gè)文本標(biāo)簽元件，分別輸入圖11-17 所示的文字內(nèi)容，并將下方的文本標(biāo)簽元件命名為“提示信息”。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.2 頁(yè)面函數(shù)Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11

10、章變量和函數(shù)11.2 函數(shù)11.2.2 頁(yè)面函數(shù)圖 11-16 重命名頁(yè)面圖11-17 創(chuàng)建文本標(biāo)簽元件（3）給當(dāng)前的母版頁(yè)面添加一個(gè)【頁(yè)面載入時(shí)】事件，在打開(kāi)的對(duì)話框中添加一個(gè)【設(shè)置文本】動(dòng)作，在右側(cè)的【配置動(dòng)作】欄中選擇“提示信息”矩形元件，單擊右下角的fx 按鈕，在彈出的對(duì)話框中添加【PageName】函數(shù)，如圖11-18 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.2 頁(yè)面函數(shù)圖 11-18 設(shè)置【頁(yè)面載入時(shí)】事件參數(shù)（4）將設(shè)置好的母版內(nèi)容分別拖放到每個(gè)頁(yè)面中，然后按【F5】鍵預(yù)覽網(wǎng)頁(yè)，通過(guò)左側(cè)的側(cè)邊欄，可以單擊對(duì)應(yīng)的頁(yè)面，右側(cè)

11、瀏覽器窗口會(huì)顯示每個(gè)頁(yè)面的名稱，如圖11-19 所示。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.2 頁(yè)面函數(shù)圖 11-19 預(yù)覽網(wǎng)頁(yè)效果【W(wǎng)indow.width】獲取當(dāng)前窗口的寬度。【W(wǎng)indow.height】獲取當(dāng)前窗口的高度?！網(wǎng)indow.scrollX】獲取當(dāng)前窗口橫向滾動(dòng)的距離?！網(wǎng)indow.scrollY】獲取當(dāng)前窗口縱向滾動(dòng)的距離。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.3 窗口函數(shù)【Cursor.x】以像素為單位獲得鼠標(biāo)指針的橫坐標(biāo)值。【Cursor.y】以像素為單位

12、獲得鼠標(biāo)指針的縱坐標(biāo)值。【DragX】表示鼠標(biāo)瞬間橫向拖動(dòng)元件時(shí)的距離。【DragY】表示鼠標(biāo)瞬間縱向拖動(dòng)元件時(shí)的距離，并非是指坐標(biāo)值?！綯otalDragX】表示鼠標(biāo)橫向拖動(dòng)元件的總距離，正數(shù)表示向左拖動(dòng)的總距離，負(fù)數(shù)表示向右拖動(dòng)的總距離。【TotalDragY】表示鼠標(biāo)縱向拖動(dòng)元件的總距離，正數(shù)表示向下拖動(dòng)的總距離，負(fù)數(shù)表示向上拖動(dòng)的總距離。鼠標(biāo)拖動(dòng)的總距離是指以按下鼠標(biāo)左鍵拖動(dòng)到釋放鼠標(biāo)左鍵結(jié)束拖動(dòng)為起點(diǎn)和終點(diǎn)?！綝ragTime】用于計(jì)算鼠標(biāo)拖動(dòng)元件的時(shí)間。計(jì)算的范圍是從按下左鍵到釋放左鍵之間拖動(dòng)的時(shí)間長(zhǎng)度，以毫秒（千分之一秒）為單位。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版

13、）第11章變量和函數(shù)11.2 函數(shù)11.2.4 鼠標(biāo)指針函數(shù)日期變量?jī)?nèi)容雖然比較多，但都比較簡(jiǎn)單。1. Now 和GenDate二者都是用于獲取日期和時(shí)間且格式相同，但是二者獲取的來(lái)源不同，前者獲取電腦系統(tǒng)當(dāng)前的日期和時(shí)間，是隨系統(tǒng)時(shí)間變化的，后者獲取生成原型的日期和時(shí)間，一旦生成，時(shí)間是固定不變的。2. GetDate()、GetDay()和GenDayOfweek()這3 個(gè)函數(shù)分別獲取今天是本月的哪一天（1-31）、本周的第幾天（0-6）、用英文表示本周的星期幾。.3. 獲取日期和時(shí)間函數(shù)包括getFullYear()、getMonth()、getHours()、getMinutes()

14、、getSeconds()、getMilliseconds()，分別可以獲取年、月、時(shí)、分、秒、毫秒。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.5 日期函數(shù)4. getMonthName()與getMonth()不同，“getMonthName()”，“getMonth()”獲取的是英文名稱的月份，后者只獲取的是月份數(shù)字。5. getTime()獲取1970 年1 月1 日迄今為止的毫秒數(shù)。6. getTimezoneOffset()獲取本地時(shí)間與格林威治標(biāo)準(zhǔn)時(shí)間的分鐘差。7. UTC 日期函數(shù)UTC 與GMT（格林威治時(shí)）一樣，都與英國(guó)倫敦

15、的本地時(shí)相同。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.5 日期函數(shù)8. parse(datestring)返回字符串表示的日期與1970 年1 月1 日午夜之間的毫秒差。日期是文本類型，轉(zhuǎn)換后變成了數(shù)值類型。9. 轉(zhuǎn)為字符串的日期變量toDateString()：將Date 日期對(duì)象轉(zhuǎn)為字符串。toLocaleDateString()：根據(jù)本地日期格式，將Date 日期對(duì)象轉(zhuǎn)為日期字符串。toLocaleTimeString()：根據(jù)本地時(shí)間格式，將Date 日期對(duì)象轉(zhuǎn)為時(shí)間字符串。toLocaleString()：根據(jù)本地日期和時(shí)間格式，

16、將Date 日期對(duì)象轉(zhuǎn)為日期時(shí)間字符串，相當(dāng)于toLocaleDateString()和toLocaleTimeString()合并。toUTCString()：根據(jù)世界標(biāo)準(zhǔn)時(shí)間，將Date 日期對(duì)象轉(zhuǎn)為UTC 格式的字符串。toISOString()：返回ISO 格式的日期。toTimeString()：將Date 日期對(duì)象的時(shí)間部分轉(zhuǎn)為UTC 格式的字符串。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.5 日期函數(shù)10. toJSON()將日期對(duì)象進(jìn)行JSON 序列化。獲得UCT 格式的時(shí)間，當(dāng)然，格林威治時(shí)間，比北京時(shí)間早8小時(shí)。11. U

17、TC(year,month,day,hour,min,sec,millisec)獲取指定年份日期與1970 年1 月1 日0 時(shí)0 分0 秒之間的毫秒差。12. valueOf()獲取日期對(duì)象的原始值。默認(rèn)日期函數(shù)是Now，獲取的結(jié)果與getTime()獲取的結(jié)果一致。結(jié)果以毫秒為單位，也就是說(shuō)，結(jié)果是當(dāng)前的日期與1970 年1 月1 日之間的差值。當(dāng)然，可以使用自定義局部變量取代默認(rèn)的Now 函數(shù)。13. 增加日期和時(shí)間的函數(shù)這類函數(shù)包含addYears（years）、addMonths（months）、addDays（days）、addHours（hours）、addMinutes（min

18、utes）、addSeconds（seconds）、addMilliseconds（ms）。這些函數(shù)可以將某個(gè)日期函數(shù)加上（正數(shù)）或減去（負(fù)數(shù)）若干年、月、日、時(shí)、分、秒和毫秒，以生成一個(gè)新的日期對(duì)象（中國(guó)標(biāo)準(zhǔn)時(shí)間，格式是GMT 時(shí)）。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.5 日期函數(shù)1. length獲得指定字符串的長(zhǎng)度，也就是該字符串有多少個(gè)字符，空格也被計(jì)算在字符數(shù)量中。2. charAt（index）獲取指定位置的字符，0 表示第一個(gè)字符，以此類推。3. charCodeAt（index）獲取指定位置的Unicode 編碼，0 表

19、示第一個(gè)字符。4. concat（string）用于字符串的合并或連接。合并多個(gè)字符串時(shí)，可以采用下面的方式。局部變量1.concat（局部變量2）.concat（局部變量3）string 如果是文本，則需要添加引號(hào)，如果是變量，就不需要添加引號(hào)。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.6 字符串函數(shù)5. indexOf（searchValue）獲取某個(gè)字符在字符串中的位置順序，第一個(gè)字符順序用0 表示，最后一個(gè)字符順序用字符總數(shù)減去1 表示?？梢允褂孟旅娴姆绞绞褂迷摵瘮?shù)。局部變量.indexOf（某個(gè)字符）6. lastIndexOf（s

20、earchvalue）獲取某個(gè)字符在該字符串中最后一次出現(xiàn)的位置，如果字符出現(xiàn)在字符串的第一個(gè)位置，就用0表示，出現(xiàn)在字符串的第二個(gè)位置用1 表示，以此類推，如果字符中包含空格，則一個(gè)空格也作為一個(gè)字符計(jì)算在內(nèi)。與indexOf（searchValue）相同，如果要計(jì)算出正確的結(jié)果，需要在函數(shù)中添加“+1”。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.6 字符串函數(shù)7. replace（searchvalue,newvalue）替換字符串函數(shù)。Searchvalue 表示被替換的字符串，newvalue 表示替換成的字符串。該函數(shù)類似記事本等程

21、序中的查找和替換命令。8. slice（start,end）截取字符串函數(shù)。start 為0 表示從第一個(gè)字符開(kāi)始截取，start 為負(fù)數(shù)則從尾部開(kāi)始截取。例如，將start 設(shè)置為3 表示從后面選取3 個(gè)字符。end 為可選項(xiàng)，可有可無(wú)。如果設(shè)置end 值，則截取的范圍不包括end 值，而是截取到end 值之前的字符串；如果end 為負(fù)值，則從后面往前取字符，例如，end 為3，表示結(jié)束的字符是從后面數(shù)第3 個(gè)。9. split（separator,limit）將字符串按照一定的規(guī)則分割成字符串組，組和組之間用逗號(hào)分割。Separator 是必須項(xiàng)，表示用于分割的字符，返回值將把該字符變成逗

22、號(hào)。如果用“”（中間無(wú)空格）分割，則每個(gè)字符都分割，即在每個(gè)字符后面都加一個(gè)逗號(hào)；limit 為可選項(xiàng)，表示分割字符串的范圍值，例如，設(shè)置為6，表示只分割字符串中的前6 個(gè)字符范圍。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.6 字符串函數(shù)10. substr（start,length）從第start 個(gè)字符開(kāi)始截取length 長(zhǎng)度內(nèi)的字符。start 為0，表示從第一個(gè)字符開(kāi)始截取。11. substring（from,to）截取從from 到to 之間的字符。from 為0，表示從第一個(gè)字符開(kāi)始截取，to 為11，表示截取到第10 個(gè)字符

23、。12. toLowerCase()和toUpperCase()大小寫(xiě)轉(zhuǎn)換函數(shù)，前者是大寫(xiě)轉(zhuǎn)小寫(xiě)，后者是小寫(xiě)轉(zhuǎn)大寫(xiě)。13. trim()刪除字符串首尾的空格。例如，字符串“Axure RP”前后各有5 個(gè)空格，共計(jì)18 個(gè)字符，使用該函數(shù)后，就變成了“Axure RP”前后沒(méi)有空格，共計(jì)8 個(gè)字符。14. toString()將邏輯字符轉(zhuǎn)為字符串并返回。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.6 字符串函數(shù)數(shù)學(xué)函數(shù)包括類似Windows 自帶的科學(xué)型計(jì)算器中的各個(gè)按鈕實(shí)現(xiàn)的效果。例如，加、減、乘、除基本運(yùn)算，獲取正弦、余弦等函數(shù)值。1. +

24、、*、/分別表示加、減、乘、除的數(shù)學(xué)運(yùn)算。2. %獲取余數(shù)，即無(wú)法整除而余下的數(shù)值。3. sin(x)、cos(x)、tan(x)、asin(x)、acos(x)、atan(x)分別表示正弦、余弦、正切、反正弦、反余弦、反正切函數(shù)。4. atan2(y,x)表示以坐標(biāo)原點(diǎn)為起點(diǎn)，指向（x ,y）的射線在坐標(biāo)平面上與x 軸正方向之間的角的角度。5. ceil(x)和floor(x)對(duì)x 進(jìn)行向上舍入（也可以叫向上取整）和向下舍入（也可以叫向下取整）操作。Axure RP 8 交互原型設(shè)計(jì)案例教程（微課版）第11章變量和函數(shù)11.2 函數(shù)11.2.7 數(shù)學(xué)函數(shù)6. exp(x)和log(x)分別是指數(shù)和對(duì)數(shù)函數(shù)。exp(x)返回x 的e 指數(shù)值，即以e 為冪的指數(shù)函數(shù)；log(x)返回x 的自然對(duì)數(shù)。7. abs(x)返回x 的絕對(duì)值。例如，abs(25.5)=abs(25.5)=25.58. max(x,y)和min(x,y)返回x 和y 兩個(gè)數(shù)值中的最大值和最小值。例如，max(10,5)=10，min(10,5)=5。9. random()返回01 的隨機(jī)值。每次得到的隨機(jī)數(shù)值是不同的。10. po