国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

分析

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

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

元件準備

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

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

交互

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

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

倒計時如何實現？

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

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

如果“time”數值滿足上述條件，為文本標簽“time”設置文字，讓其數值減一。

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

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

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

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

再次按F5預覽，點擊按鈕，我們需要的效果都已實現。

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

原型預覽地址：https://9e4chn.axshare.com

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

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

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

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