一、頁面布局
從左側元件庫拉入一個【矩形】作為驗證碼按鈕,一個【文本框】作為短信驗證碼輸入框,如圖:
第二步:
點擊【頂部菜單欄】-》【項目】-》【全局變量】,點擊彈窗中的“+”號,添加驗證碼的【全局變量】,這里命名為:captcha;想從哪個數字開始倒計時,即將此變量的默認值設置為哪個數字(此案例設為10)
預計效果為:當點擊驗證碼按鈕時,驗證碼文案會變為“10秒后重新獲取”,接下來變為9、8、7……秒后重新獲取
實現流程為:選中驗證碼矩形,右側點擊交互,點擊新建交互
選擇鼠標單擊時,設置文本,勾選【當前元件】-》設置文本的值為“[[captcha]]秒后重新獲取”;
然后點擊加號,選擇等待,時間設為“1000”毫秒
再次點擊加號,選擇設置變量值,選擇captcha,值設置為:[[captcha-1]]
需要重新觸發最先的點擊按鈕交互事件,讓驗證碼的文本發生變化,即變為:“9秒后重新獲取”;並且重復執行該交互。因此,再次點擊加號,選擇【觸發事件】-》勾選【當前元件】-》勾選【鼠標單擊時】
正常情況下,應該是倒計時為0秒時停止計時,按鈕文本變為“重新獲取”。點擊重新獲取,則重新執行倒計時效果。
因此,需要對全局變量進行判斷,當全局變量大於等於0時,執行上面的交互。否則(小於0),直接讓文本變為 “重新獲取”;
並且讓全局變量【captcha】重新設置10,這樣,重新點擊【驗證碼】按鈕時,由於全局變量【captcha】大於0,才能夠重新執行鼠標點擊的交互事件。
給鼠標單擊事件添加條件,當變量值【captcha】>=0時,執行事件
再次點擊Enable Cases,添加條件,使其小於0
在用例2下點擊加號,選擇設置文本,勾選【當前元件】-》設置文本的值為“重新獲取”
再次點擊加號,【設置變量值】-》勾選【captcha】,值設置為:10
結束,倒計時發送驗證碼重新獲取設置完成,預覽效果