生活中瓷胧，我們經(jīng)常看到網(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秒后重新獲取”耘纱，接下來(lái)變?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秒后重新獲取”；
接下來(lái)需要設(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
示例演示：
