在產品註冊頁面,當點擊發送驗證碼後,會進入倒計時,計時結束後才能重新點擊發送,這個效果是如何做出來的呢?
生活中,我們經常看到網站、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協議
閱讀更多 人人都是產品經理 的文章