用 Axure 設計60S倒計時
很多互聯網平臺,采用手機號注冊時,都要獲取驗證碼,如何在原型中做到點擊獲取驗證碼按鈕,上面會和真實注冊一樣,出現倒計時?倒計時60S結束后,文案又恢復為獲取驗證碼?
如下圖,圖一為點擊后,圖二未點擊時文案:
第一步:
設置全局變量,隨便用字母命名一個,我用的是S。當頁面載入時,設置全局變量的值為60。
第二步:
設置點擊交互事件,首先添加一個動態面板,大小不限制,命名為時間計算(隨意)。
其次復制一個面板,使之包含兩層面板。
然后命名獲取驗證碼按鈕名稱為“驗證碼”,點擊驗證碼,設置“時間計算”面板循環向后切換,時間間隔為1000毫秒。
最后當“時間面板”循環時,選擇時間面板元件,狀態改變時,設置全局變量值為S=[S-1],設置文本于按鈕文字 還剩[s]秒重新發送,當S=0時,“時間面板停止循環”再次賦值S=60,按鈕文字為獲取驗證碼。
如下圖:
完美,收工。
本文由 @胖子 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
這里面有個問題,就是編輯條件的時候,應該是(If “[[s]]” > “0”),而不是(If “s” > “0”)。
我自己做的時候,實現本來30秒,倒計時到29秒就停了,為什么?求大神指教!??!
OK,好了
確認無誤,為什么我做完后點擊不行啊 ??
嗯,可以就行;