在產(chǎn)品注冊(cè)頁(yè)面，當(dāng)點(diǎn)擊發(fā)送驗(yàn)證碼后，會(huì)進(jìn)入倒計(jì)時(shí)，計(jì)時(shí)結(jié)束后才能重新點(diǎn)擊發(fā)送，這個(gè)效果是如何做出來(lái)的呢？

生活中，我們經(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ù)字開(kāi)始倒計(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ù)覽效果

示例下載：

https://pan.baidu.com/s/1uN7AiwbB604wdSqpA6pNZA

示例演示：

如有問(wèn)題歡迎在評(píng)論區(qū)留言！

作者：火星人～艾斯，公眾號(hào)：艾斯的Axure峽谷

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

題圖來(lái)自Unsplash，基于CC0協(xié)議