前幾天做一個移動端App原型，做注冊界面是需要有手機(jī)短信驗證碼驗證，想做出那種點擊發(fā)送短信驗證碼，出現(xiàn)倒計時，參考了很多文章，做出了那種效果。剛學(xué)做的比較LOW，大神路過別噴，請大家指正。

分析

要做到這種效果，需要清楚三點

1. 點擊發(fā)送驗證碼后開始出現(xiàn)倒計時，倒計時開始，按鈕不可點擊；
2. 倒計時如何實現(xiàn)；
3. 倒計時結(jié)束后返回發(fā)送驗證碼，再次點擊再次出現(xiàn)倒計時。

元件準(zhǔn)備

拖入一個文本輸入框“numberinput”，兩個按鈕“sendinfor”和“background”一個文本標(biāo)簽“time”設(shè)置為10。（文本標(biāo)簽“time”和另一個按鈕在“background”組合在一起放到“sendinfor”下面）

將按鈕“sendinfor”轉(zhuǎn)換為動態(tài)面板“round”，復(fù)制狀態(tài)增加一個“state2”。

交互

首先實現(xiàn)鼠標(biāo)點擊發(fā)送按鈕，出現(xiàn)倒計時。因為倒計時是在動態(tài)面板“round”下面，所以只需要隱藏動態(tài)面板“round”就行。

為動態(tài)面板round添加“鼠標(biāo)單擊時”事件，設(shè)置“顯示/隱藏”，隱藏動態(tài)面板“round”，此時倒計時出現(xiàn)，只不過沒有效果。

倒計時如何實現(xiàn)？

我們利用動態(tài)面板的狀態(tài)循環(huán)，循環(huán)一次，“time”數(shù)值減1。

雙擊動態(tài)面板round的“狀態(tài)改變時”事件，在彈出的窗口中點擊“添加條件”，設(shè)置“元件文字”time > 值 0。

如果“time”數(shù)值滿足上述條件，為文本標(biāo)簽“time”設(shè)置文字，讓其數(shù)值減一。

前面為“round”添加了“鼠標(biāo)點擊時”事件，我們只需要在隱藏“round”動作前添加一個動作“設(shè)置面板狀態(tài)”，讓“round”向后循環(huán)，循環(huán)間隔800ms，勾選首個狀態(tài)延時800ms后切換。

做完上面的步驟，我們按F5預(yù)覽一下，鼠標(biāo)點擊發(fā)送按鈕，倒計時開始，出現(xiàn)了我們需要效果：

但是“time”減為0后，沒有返回發(fā)送驗證碼。

分析一下，前面當(dāng)“time”數(shù)值大于0的時候動態(tài)面板狀態(tài)改變，改變一次“time”數(shù)值減1，減到0后，動態(tài)面板也不再循環(huán)。所以我們增加一個條件，當(dāng)“time”數(shù)值=0時，我們設(shè)置“time”值為10，顯示“round”。

再次按F5預(yù)覽，點擊按鈕，我們需要的效果都已實現(xiàn)。

本人小白，寫的有點亂，有任何疑問，歡迎交流。

原型預(yù)覽地址：https://9e4chn.axshare.com

原型下載：https://pan.baidu.com/s/1B5NKVjdu8dodNTNiqnDzHA /密碼bdic

參考文章：https://blog.csdn.net/chali22/article/details/77963069

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

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