在產品注冊頁面，當點擊發送驗證碼后，會進入倒計時，計時結束后才能重新點擊發送，這個效果是如何做出來的呢？

生活中，我們經?？吹骄W站、APP的注冊頁面，當點擊發送驗證碼后，會進入倒計時，計時結束后才能重新點擊發送。

一、頁面布局

從左側元件庫拉入一個【矩形】作為驗證碼按鈕，兩個【文本框】作為手機輸入框和短信驗證碼輸入框，如下：

首先雙擊【驗證碼矩形】，將文本設置為：發送驗證碼；

其次，點擊【頂部菜單欄】-》【項目】-》【全局變量】，點擊彈窗中的“+”號，添加驗證碼的【全局變量】，這里命名為：captcha；想從哪個數字開始倒計時，即將此變量的默認值設置為哪個數字（此案例設為10）；

二、添加交互

實際效果為：當點擊驗證碼按鈕時，驗證碼文案會變為“10秒后重新獲取”，接下來變為9、8、7……秒后重新獲取。

實現流程為：選中驗證碼矩形，雙擊右側【屬性】欄中的【鼠標點擊時】；

選擇左側導航中【設置文本】-》勾選【當前元件】-》設置文本的值為“[[captcha]]秒后重新獲取”；

因為之前已經將全局變量captcha的默認值設為10，所以預覽時文本為 “10秒后重新獲取”；

接下來需要設置等待事件，讓文案每隔一秒，進行變化一次；

即選擇左側導航中【其他】-》【等待】-》等待時間設為“1000”毫秒；

然后讓全部變量 “captcha” 減1，變為9、8、7……..，即再次選擇左側導航中【全局變量】-》【設置變量值】-》勾選【captcha】，值設置為：[[captcha-1]]。此時，“captcha” 的值已經變為“9”；

最后，需要重新觸發最先的點擊按鈕交互事件，讓驗證碼的文本發生變化，即變為：“9秒后重新獲取”；并且重復執行該交互。

因此，再次選擇左側導航中【其他】-》【觸發事件】-》勾選【當前元件】-》勾選【鼠標單擊時】。

三、交互細節調整

正常情況下，應該是倒計時為0秒時停止計時，按鈕文本變為“重新獲取”。點擊重新獲取，則重新執行倒計時效果。

因此，需要對全局變量進行判斷，當全局變量大于等于0時，執行上面的交互。否則（小于0），直接讓文本變為 “重新獲取”；

并且讓全局變量【captcha】重新設置10，這樣，重新點擊【驗證碼】按鈕時，由于全局變量【captcha】大于0，才能夠重新執行鼠標點擊的交互事件。

給case1添加條件，當變量值【captcha】>=0時，執行事件；

再次選中驗證碼矩形，雙擊右側【屬性】欄中的【鼠標點擊時】，添加case2；選擇左側導航中【設置文本】-》勾選【當前元件】-》設置文本的值為“重新獲取”；

選擇左側導航中【全局變量】-》【設置變量值】-》勾選【captcha】，值設置為：10。

四、預覽效果

示例下載：

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

示例演示：

如有問題歡迎在評論區留言！

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議