在新注冊賬號或者等待驗證碼的過程中，我們常常會見到需要等待幾十秒的情況。這種自動倒計時的效果時如何實現(xiàn)的呢？文章講解了如何用Axure實現(xiàn)倒計時效果，一起來看看~

我們在使用互聯(lián)網(wǎng)來充實我們生活的時候，或多或少都會遇到這樣的情況：比如網(wǎng)站注冊新用戶時，為了方便和安全起見，現(xiàn)用戶名可能就是用手機號來注冊；又或者用手機注冊新用戶后，長時間不登錄網(wǎng)站結果發(fā)現(xiàn)之前設置的密碼忘記了等等。

這些時候不管是注冊還是重新找回密碼，比較方便的一種方式就是通過獲取手機驗證碼來驗證我們的身份。這個也是很多網(wǎng)站常用的一種方式。

獲取手機驗證碼的時候，我們又會發(fā)現(xiàn)，我們不能太頻繁地獲取密碼，通常需要等待幾十秒甚至更多時間才能再次獲取手機驗證碼。

今天呢，我就帶大家一起來看一下Axure中如何實現(xiàn)這種效果。

話不多說，還是按照我們以往的套路來講解。

下文將從3個方面來展開。

01 需求分析

首先先來看一下這個具體的需求是什么？

需求比較簡單：點擊獲取驗證碼，后臺會自動計時并顯示；60秒后才能再次點擊按鈕獲取驗證碼。

從上面的描述，我們看到關鍵詞“自動計時”。仔細想想，我們前面講到圖片輪播的時候，是不是講到可以設置間隔多長時間切換圖片呢？這里就是突破口。

沒錯，還是我么熟悉的它，動態(tài)面板。

02 Axure關鍵點分析

1. 全局變量

這里需要把剩余的時間顯示出來，這個需要用到全局變量來實現(xiàn)

設置全局變量TimeLeft，默認值為60。

2. 設置動態(tài)面板

需要注意的是，動態(tài)面板至少需要2個值才能實現(xiàn)切換

每切換一次，時間減少1s，同時顯示剩余秒數(shù)，這里就用到上面的全局變量（每次切換頻率為1s，下面3）中會講到）

當剩余秒數(shù)等于0時，則可以再次點擊獲取驗證碼；重置全局變量并停止動態(tài)面板切換

3. 設置獲取驗證碼按鈕的交互效果

禁用該按鈕，并且設置動態(tài)面板間隔1s切換。

03 效果展示

最后，我們來看一下最終效果，網(wǎng)址為：https://sg5ppu.axshare.com

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

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