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

分析

要做到這種效果，需要清楚三點(diǎn)

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

元件準(zhǔn)備

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

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

交互

首先實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊發(fā)送按鈕，出現(xiàn)倒計(jì)時(shí)。因?yàn)榈褂?jì)時(shí)是在動(dòng)態(tài)面板“round”下面，所以只需要隱藏動(dòng)態(tài)面板“round”就行。

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

倒計(jì)時(shí)如何實(shí)現(xiàn)？

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

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

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

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

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

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

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

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

本人小白，寫的有點(diǎ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é)議