“發送驗證碼，倒計時重新發送”，這個功能在産品中非常常見，本篇文章筆者将會以兩種方法來展示如何實現這個功能，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協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部