導(dǎo)讀：我們在使用賬號登錄一些系統(tǒng)或其他產(chǎn)品時(shí)，經(jīng)常會(huì)遇到安全驗(yàn)證，常見的大多是文字驗(yàn)證、滑動(dòng)拼圖驗(yàn)證、數(shù)字驗(yàn)證等。本篇文章將向大家詳細(xì)介紹一下如何繪制常見的驗(yàn)證碼倒計(jì)時(shí)驗(yàn)證登錄，希望可以幫助到大家。

原型示例：https://zufeki.axshare.com? ? (若打開鏈接比較慢，請耐心等待一下)

一、原型準(zhǔn)備

今天我們主要講的是關(guān)于輸入驗(yàn)證碼倒計(jì)時(shí)登錄，那我們首先先在頁面中放置登錄頁基本的元件

如：帳號輸入框、驗(yàn)證碼輸入框、獲取驗(yàn)證碼按鈕、登錄按鈕、登陸協(xié)議等

接著，我們選中【獲取驗(yàn)證碼】按鈕，添加交互：單擊時(shí)-設(shè)置情形1-（if值于 X > 1）時(shí)

對情形1添加動(dòng)作：設(shè)置文本-值：[[X]]秒后重新獲取

選中全局變量X后，在[[X]]后輸入：秒后重新獲取

下一步設(shè)置動(dòng)作：等待-1000ms，接著再選擇：設(shè)置變量值-[[X-1]]

再對情形1設(shè)置最后一步動(dòng)作：觸發(fā)事件-單擊時(shí)

情形1設(shè)置完成后，接著我們再進(jìn)行設(shè)置情形2，也就是除情形1之外所涉及的變量信息

接著設(shè)置文本為重新獲取，設(shè)置變量值為X為60

截至到這里，我們即可以預(yù)覽獲取驗(yàn)證碼倒計(jì)時(shí)頁面，點(diǎn)擊獲取驗(yàn)證碼就會(huì)顯示倒計(jì)時(shí)了，可以查看上面的原型地址預(yù)覽

接著，我們再對【登錄】按鈕進(jìn)行設(shè)置密碼驗(yàn)證，密碼驗(yàn)證和上方的倒計(jì)時(shí)設(shè)置情形基本相似，此處將不再詳細(xì)做講解

我們再做一個(gè)錯(cuò)誤提示的彈窗以表示輸入錯(cuò)誤驗(yàn)證碼時(shí)所出現(xiàn)的提示，并先將其隱藏。

以上，就是關(guān)于獲取驗(yàn)證碼倒計(jì)時(shí)，輸入正確的驗(yàn)證碼登錄的整個(gè)原型講解，若有描述不夠詳細(xì)的地方，可以在下方評論，本人看到后第一時(shí)間回復(fù)你們，希望本篇教程可以幫助到你們。

本文由 @Eason同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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