用 Axure 設計60S倒計時

5 評論 8725 瀏覽 11 收藏 3 分鐘

很多互聯網平臺,采用手機號注冊時,都要獲取驗證碼,如何在原型中做到點擊獲取驗證碼按鈕,上面會和真實注冊一樣,出現倒計時?倒計時60S結束后,文案又恢復為獲取驗證碼?

如下圖,圖一為點擊后,圖二未點擊時文案:

第一步:

設置全局變量,隨便用字母命名一個,我用的是S。當頁面載入時,設置全局變量的值為60。

第二步:

設置點擊交互事件,首先添加一個動態面板,大小不限制,命名為時間計算(隨意)。

其次復制一個面板,使之包含兩層面板。

然后命名獲取驗證碼按鈕名稱為“驗證碼”,點擊驗證碼,設置“時間計算”面板循環向后切換,時間間隔為1000毫秒。

最后當“時間面板”循環時,選擇時間面板元件,狀態改變時,設置全局變量值為S=[S-1],設置文本于按鈕文字 還剩[s]秒重新發送,當S=0時,“時間面板停止循環”再次賦值S=60,按鈕文字為獲取驗證碼。

如下圖:

完美,收工。

 

本文由 @胖子 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 這里面有個問題,就是編輯條件的時候,應該是(If “[[s]]” > “0”),而不是(If “s” > “0”)。

    來自吉林 回復
  2. 我自己做的時候,實現本來30秒,倒計時到29秒就停了,為什么?求大神指教!??!

    來自寧夏 回復
  3. OK,好了

    來自北京 回復
  4. 確認無誤,為什么我做完后點擊不行啊 ??

    來自北京 回復
    1. 嗯,可以就行;

      來自廣東 回復