很多互聯(lián)網(wǎng)平臺，采用手機號注冊時，都要獲取驗證碼，如何在原型中做到點擊獲取驗證碼按鈕，上面會和真實注冊一樣，出現(xiàn)倒計時？倒計時60S結(jié)束后，文案又恢復(fù)為獲取驗證碼？

如下圖，圖一為點擊后，圖二未點擊時文案：

第一步：

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

第二步：

設(shè)置點擊交互事件，首先添加一個動態(tài)面板，大小不限制，命名為時間計算（隨意）。

其次復(fù)制一個面板，使之包含兩層面板。

然后命名獲取驗證碼按鈕名稱為“驗證碼”，點擊驗證碼，設(shè)置“時間計算”面板循環(huán)向后切換，時間間隔為1000毫秒。

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

如下圖：

完美，收工。

本文由 @胖子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議