“發(fā)送驗證碼，倒計時重新發(fā)送”，這個功能在產(chǎn)品中非常常見，本篇文章筆者將會以兩種方法來展示如何實現(xiàn)這個功能，enjoy~

一、案例目標

今天這個教程中，我會用2種方法實現(xiàn)這個功能原型，主要涉及到“全局變量的使用”，先看一下原型樣式：

您也可以在線預覽交互效果：點擊預覽

二、案例教程

第一種實現(xiàn)方法

使用“動態(tài)面板”的切換，來達到倒計時的效果；

所需元件：

2個輸入框、1個發(fā)送驗證碼的按鈕、1個登錄按鈕、1個動態(tài)面板(命名為“循環(huán)面板”)

制作步驟：

1. 先拖一個文本框，調(diào)整好寬、高、圓角，邊框顏色；

2. 點擊“交互”-新建交互-在“交互樣式”中選“獲取焦點時”，設置文本框獲取焦點時的樣式；同理設置“提示文字”

3. 選中文本框，右擊可以設置“輸入類型”、“編輯輸入最大長度”；

4. 以此設置好元件的靜態(tài)樣式。

進入交互設置：

1. 由于時間是一個變量，并且需要做實時改變，所以先設置一個全局變量X，并設置初始值為30;

2. 發(fā)送驗證碼 按鈕的交互事件設置

• 只有按鈕“發(fā)送驗證碼”文字為“發(fā)送驗證碼”的時候，才可以點擊，所以我們在給按鈕設置“單擊? ? ? ? ? 時”交互事件的時候，需要先添加一個條件；
• 設置面板狀態(tài)為“往后循環(huán)”；
• 為了能夠每次點擊時，X的值都為30，所以設置變量值為30；

3. 循環(huán)面板的交互設置

• 首先，當面板開始改變的時候，去設置“發(fā)送驗證碼”按鈕的文本為“剩余[[X]]秒”；
• 為了使時間每次都減去1，所以還要設置變量值X為[[X-1]]；
• 為了使倒計時為“0”的時候，出現(xiàn)發(fā)送驗證碼，所以設置兩個條件，值X>0，值x==0時，就設置文? ? ? 本為“發(fā)送驗證碼”；

實現(xiàn)邏輯：

1. 單擊“發(fā)送驗證碼”：

設置“循環(huán)面板”每秒鐘切換一次狀態(tài)；

2. “循環(huán)面板”狀態(tài)改變時：

設置“發(fā)送驗證碼”文本變?yōu)椤笆Ｓ郮秒”；當剩余0秒時，可以重新發(fā)送

第二種實現(xiàn)方法

使用“等待”事件，來達到倒計時的效果；

所需元件：

2個輸入框、1個發(fā)送驗證碼的按鈕、1個登錄按鈕;

制作步驟：

1. 靜態(tài)元件同方法一；
2. 直接進入交互設置

• 首先，設置一個全局變量X；初始值為30；
• 設置“單擊事件”，先判斷條件X>0時，去設置“發(fā)送驗證碼”按鈕的文本為“剩余[[X]]秒”；
• 為了使時間每次都減去1，所以在等待1秒后，將變量值X設為[[X-1]]；
• 觸發(fā)“單擊事件”，讓設置文本為“剩余[[X]]秒，然后等待1秒鐘，循環(huán)多次”；
• 其次，當條件X==0時，就需要設置文本為“發(fā)送驗證碼”，終止單擊事件循環(huán)。

實現(xiàn)邏輯：

單擊“發(fā)送驗證碼”：

設置“發(fā)送驗證碼”文本變?yōu)椤笆Ｓ郮秒”；

等待1秒，然后再設置X為[[X-1]]，然后再觸發(fā)“單擊事件”

相當于重復循環(huán)改變X值，直到==0；

當剩余0秒時，可以重新發(fā)送

作者：Jack.lin，公眾號 ：Axure I 交互，來交流哦！

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

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