生活中，我們經(jīng)?？吹骄W(wǎng)站、APP的注冊(cè)頁(yè)面，當(dāng)點(diǎn)擊發(fā)送驗(yàn)證碼后，會(huì)進(jìn)入倒計(jì)時(shí)，計(jì)時(shí)結(jié)束后才能重新點(diǎn)擊發(fā)送。
一、頁(yè)面布局
從左側(cè)元件庫(kù)拉入一個(gè)【矩形】作為驗(yàn)證碼按鈕，兩個(gè)【文本框】作為手機(jī)輸入框和短信驗(yàn)證碼輸入框，如下：
首先雙擊【驗(yàn)證碼矩形】，將文本設(shè)置為：發(fā)送驗(yàn)證碼；
其次，點(diǎn)擊【頂部菜單欄】-》【項(xiàng)目】-》【全局變量】，點(diǎn)擊彈窗中的“+”號(hào)，添加驗(yàn)證碼的【全局變量】，這里命名為：captcha；想從哪個(gè)數(shù)字開始倒計(jì)時(shí)，即將此變量的默認(rèn)值設(shè)置為哪個(gè)數(shù)字（此案例設(shè)為10）；
二、添加交互
實(shí)際效果為：當(dāng)點(diǎn)擊驗(yàn)證碼按鈕時(shí)，驗(yàn)證碼文案會(huì)變?yōu)椤?0秒后重新獲取”，接下來變?yōu)?、8、7……秒后重新獲取。
實(shí)現(xiàn)流程為：選中驗(yàn)證碼矩形，雙擊右側(cè)【屬性】欄中的【鼠標(biāo)點(diǎn)擊時(shí)】；
選擇左側(cè)導(dǎo)航中【設(shè)置文本】-》勾選【當(dāng)前元件】-》設(shè)置文本的值為“[[captcha]]秒后重新獲取”；
因?yàn)橹耙呀?jīng)將全局變量captcha的默認(rèn)值設(shè)為10，所以預(yù)覽時(shí)文本為 “10秒后重新獲取”；
接下來需要設(shè)置等待事件，讓文案每隔一秒，進(jìn)行變化一次；
即選擇左側(cè)導(dǎo)航中【其他】-》【等待】-》等待時(shí)間設(shè)為“1000”毫秒；
然后讓全部變量 “captcha” 減1，變?yōu)?、8、7……..，即再次選擇左側(cè)導(dǎo)航中【全局變量】-》【設(shè)置變量值】-》勾選【captcha】，值設(shè)置為：[[captcha-1]]。此時(shí)，“captcha” 的值已經(jīng)變?yōu)椤?”；
最后，需要重新觸發(fā)最先的點(diǎn)擊按鈕交互事件，讓驗(yàn)證碼的文本發(fā)生變化，即變?yōu)椋骸?秒后重新獲取”；并且重復(fù)執(zhí)行該交互。
因此，再次選擇左側(cè)導(dǎo)航中【其他】-》【觸發(fā)事件】-》勾選【當(dāng)前元件】-》勾選【鼠標(biāo)單擊時(shí)】。
三、交互細(xì)節(jié)調(diào)整
正常情況下，應(yīng)該是倒計(jì)時(shí)為0秒時(shí)停止計(jì)時(shí)，按鈕文本變?yōu)椤爸匦芦@取”。點(diǎn)擊重新獲取，則重新執(zhí)行倒計(jì)時(shí)效果。
因此，需要對(duì)全局變量進(jìn)行判斷，當(dāng)全局變量大于等于0時(shí)，執(zhí)行上面的交互。否則（小于0），直接讓文本變?yōu)?“重新獲取”；
并且讓全局變量【captcha】重新設(shè)置10，這樣，重新點(diǎn)擊【驗(yàn)證碼】按鈕時(shí)，由于全局變量【captcha】大于0，才能夠重新執(zhí)行鼠標(biāo)點(diǎn)擊的交互事件。
給case1添加條件，當(dāng)變量值【captcha】>=0時(shí)，執(zhí)行事件；
再次選中驗(yàn)證碼矩形，雙擊右側(cè)【屬性】欄中的【鼠標(biāo)點(diǎn)擊時(shí)】，添加case2；選擇左側(cè)導(dǎo)航中【設(shè)置文本】-》勾選【當(dāng)前元件】-》設(shè)置文本的值為“重新獲取”；
選擇左側(cè)導(dǎo)航中【全局變量】-》【設(shè)置變量值】-》勾選【captcha】，值設(shè)置為：10。
四、預(yù)覽效果
歡迎大家留言評(píng)論，也可以留下你期待看到的交互效果。學(xué)習(xí)更多教程可以關(guān)注本人微信公眾號(hào)：艾斯的Axure峽谷。
更多Axure原型源文件下載：我的Axure作品集
示例下載：
https://pan.baidu.com/s/1uN7AiwbB604wdSqpA6pNZA
示例演示：
