如何利用Axure制作倒計(jì)時(shí)獲取驗(yàn)證碼案例
---準(zhǔn)備工作在使用Axure制作倒計(jì)時(shí)獲取驗(yàn)證碼案例之前,首先需要新建2個(gè)按鍵、1個(gè)標(biāo)簽和2個(gè)文本框。將標(biāo)簽內(nèi)容修改為“短信驗(yàn)證碼”,一個(gè)按鍵內(nèi)容修改為“獲取驗(yàn)證碼”并命名為按鍵1,另一個(gè)按鍵內(nèi)容修
---
準(zhǔn)備工作
在使用Axure制作倒計(jì)時(shí)獲取驗(yàn)證碼案例之前,首先需要新建2個(gè)按鍵、1個(gè)標(biāo)簽和2個(gè)文本框。將標(biāo)簽內(nèi)容修改為“短信驗(yàn)證碼”,一個(gè)按鍵內(nèi)容修改為“獲取驗(yàn)證碼”并命名為按鍵1,另一個(gè)按鍵內(nèi)容修改為“重新發(fā)送(s)”并命名為按鍵2。同時(shí),為了展示倒計(jì)時(shí)效果,給一個(gè)文本框命名為“倒計(jì)時(shí)”。
布局設(shè)計(jì)
將文本框“倒計(jì)時(shí)”與按鍵2做布局設(shè)計(jì),讓它們重疊在一起,并設(shè)置按鍵1在頂層。隱藏文本框的邊框以達(dá)到更好的展示效果。為了實(shí)現(xiàn)在獲取驗(yàn)證碼時(shí)按鍵不能被點(diǎn)擊的效果,設(shè)置按鍵2的禁用狀態(tài)下顯示字體顏色為淺灰色。
動(dòng)作設(shè)置
設(shè)置按鍵1的“鼠標(biāo)單擊時(shí)”動(dòng)作,包括將按鍵2和文本框“倒計(jì)時(shí)”置頂,并將文本框內(nèi)容設(shè)為10。接著,設(shè)置文本框“倒計(jì)時(shí)”的“文本改變時(shí)”動(dòng)作,當(dāng)?shù)褂?jì)時(shí)大于等于1時(shí)每秒減少1,直到倒計(jì)時(shí)為0。當(dāng)?shù)褂?jì)時(shí)為0時(shí),將按鍵2和文本框“倒計(jì)時(shí)”置于底層,并將按鍵1的內(nèi)容改為“再次獲取驗(yàn)證碼”。
查看效果
完成動(dòng)作設(shè)置后,點(diǎn)擊“獲取驗(yàn)證碼”按鈕即可啟動(dòng)倒計(jì)時(shí)效果。這個(gè)案例不需要?jiǎng)討B(tài)面板制作,非常簡(jiǎn)單易懂。如果覺得這個(gè)案例不錯(cuò),請(qǐng)給予支持和點(diǎn)贊哦!
---
通過以上步驟,你可以輕松利用Axure制作出一個(gè)實(shí)用的倒計(jì)時(shí)獲取驗(yàn)證碼案例。這個(gè)案例不僅能提升用戶體驗(yàn),還能讓頁面操作更加智能和便捷。希望以上內(nèi)容對(duì)你有所幫助,期待你在實(shí)際應(yīng)用中取得成功!