在產品註冊頁面，當點擊發送驗證碼後，會進入倒計時，計時結束後才能重新點擊發送，這個效果是如何做出來的呢？
生活中，我們經常看到網站、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
示例演示：
如有問題歡迎在評論區留言！
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
