在注冊(cè)時(shí)常用到發(fā)送驗(yàn)證碼的功能，輸入手機(jī)號(hào)后點(diǎn)擊“發(fā)送驗(yàn)證碼” 此時(shí)按鈕置灰 并開(kāi)始倒計(jì)時(shí)，倒計(jì)時(shí)結(jié)束后，可以再次點(diǎn)擊“發(fā)送驗(yàn)證碼”

我用Axure也做了一個(gè)這樣的效果，不足之處請(qǐng)指出。

下面先看一下效果：

下面詳細(xì)介紹一下制作過(guò)程：

步驟一：在頁(yè)面中添加元件，其他元件根據(jù)需要添加，這里最重要的是添加一個(gè)按鈕并命名為“發(fā)送驗(yàn)證碼”? 和? 添加 動(dòng)態(tài)面板。

按鈕用來(lái)觸發(fā)事件并展示效果，動(dòng)態(tài)面板主要是為了做循環(huán)遞減效果并設(shè)置文本

步驟二：在【項(xiàng)目】菜單中，點(diǎn)擊【全局變量】，添加一個(gè)新的全局變量“Num”。

步驟三：雙擊動(dòng)態(tài)面板，為其添加一個(gè)新的狀態(tài)“State2”。（這一步是為了保證動(dòng)態(tài)面板能夠切換狀態(tài)）。

步驟四：為動(dòng)態(tài)面板增加【狀態(tài)改變時(shí)】事件并添加第一個(gè)情形，條件設(shè)置為【變量值】【Num】【>】【值】“0”。 如下圖

步驟五：添加滿(mǎn)足條件的動(dòng)作為【設(shè)置變量值】【Num】為【值】“[[Num-1]]”。

步驟六：繼續(xù)添加動(dòng)作，【設(shè)置文本】于“發(fā)送驗(yàn)證碼”為【設(shè)置文本】“[[Num]]秒后可重新發(fā)送”。

步驟七：為【狀態(tài)改變時(shí)】再次添加情形（當(dāng)變量Num等于0時(shí)）

步驟八：為此種情形下添加動(dòng)作

1、將按鈕“發(fā)送驗(yàn)證碼” 的文本設(shè)置成“發(fā)送驗(yàn)證碼”? （因?yàn)樵贜um>0的情形中將文本改成了“[[Num]]秒后可重新發(fā)送”所以處需重置一下文本）

2、將變量Num 的值重置為 60，以便下次倒計(jì)時(shí)使用。

3、更改按鈕“發(fā)送驗(yàn)證碼”的狀態(tài)為啟用。

4、設(shè)置該動(dòng)態(tài)面板狀態(tài)為停止循環(huán)。（在按鈕的點(diǎn)擊事件中將會(huì)設(shè)置動(dòng)態(tài)面板循環(huán)）

步驟九：為按鈕“發(fā)送驗(yàn)證碼”設(shè)置【禁用】狀態(tài)的交互樣式，【填充顏色】為灰色。

步驟十：為按鈕“發(fā)送驗(yàn)證碼”添加【鼠標(biāo)單擊時(shí)】的事件，并設(shè)置如下動(dòng)作：

1、添加動(dòng)作，設(shè)置變量Num值為60（首次倒計(jì)時(shí)需要有初始值，如果設(shè)置變量的時(shí)候已經(jīng)設(shè)置了默認(rèn)值此處可忽略）

2、添加動(dòng)作【設(shè)置面板狀態(tài)】于動(dòng)態(tài)面板，選擇狀態(tài)【下一項(xiàng)】，勾選【向后循環(huán)】，設(shè)置自動(dòng)循環(huán)間隔為【1000】毫秒，取消【首個(gè)狀態(tài)延時(shí)1000毫秒切換】的選項(xiàng)。

3、添加動(dòng)作? 禁用當(dāng)前按鈕。

最后，預(yù)覽看效果！