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

一、案例目標

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

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

二、案例教程

第一種實現方法

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

所需元件：

2個輸入框、1個發送驗證碼的按鈕、1個登錄按鈕、1個動態面板(命名為“循環面板”)

制作步驟：

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

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

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

4. 以此設置好元件的靜態樣式。

進入交互設置：

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

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

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

3. 循環面板的交互設置

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

實現邏輯：

1. 單擊“發送驗證碼”：

設置“循環面板”每秒鐘切換一次狀態；

2. “循環面板”狀態改變時：

設置“發送驗證碼”文本變為“剩余X秒”；當剩余0秒時，可以重新發送

第二種實現方法

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

所需元件：

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

制作步驟：

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

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

實現邏輯：

單擊“發送驗證碼”：

設置“發送驗證碼”文本變為“剩余X秒”；

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

相當于重復循環改變X值，直到==0；

當剩余0秒時，可以重新發送

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

本文由 @Jack.lin 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議