再一次工作中遇到了產(chǎn)品設(shè)計的注冊和登錄模塊疗杉，今天和大家聊聊如何利用Axure實現(xiàn)圖片驗證碼的隨機切換。
以往都為了方便或者說是偷懶每次在設(shè)計驗證碼的時候椎组，總會手工設(shè)置幾張圖片驗證碼作為動態(tài)面板的幾個狀態(tài)丹拯，利用動態(tài)面板的狀態(tài)切換，基本也算實現(xiàn)了切換驗證碼的交互效果斤程，但總覺得缺少了什么角寸，保真度不夠。
回到正題忿墅，首先來分析下需要實現(xiàn)的效果：
1扁藕、圖片中的驗證碼為數(shù)字和字母的隨機組合
2、點擊驗證碼和右側(cè)的文字疚脐，左側(cè)的驗證碼隨機出現(xiàn)4位字母或數(shù)字
隨機驗證碼是顯示在一個矩形框內(nèi)亿柑，這里只需要從26個大寫英文字母和10個數(shù)字中隨機獲取一位字符，四個字符拼成一個隨機驗證碼亮曹。
交互效果其實很簡單橄杨，下面我們來看下如何實現(xiàn)：
第一步：準(zhǔn)備好相關(guān)的部件秘症，拖入一個矩形框至設(shè)計區(qū)域，矩形框中默認(rèn)輸入A C 5 8式矫；拖入文本標(biāo)簽至矩形框右側(cè)乡摹，輸入文字“看不清，請換一張”采转；
第二步：選中右側(cè)文本標(biāo)簽聪廉，選擇鼠標(biāo)單擊事件，選擇設(shè)置變量新增動作故慈，配置動作中選擇新增變量板熊，新增全局變量random_str，并給予賦值A(chǔ)BCDEFGHIJKLMNOPQRSTUVWXYZ0123456789（驗證碼就是從這里隨機抽炔毂痢）
第三步：給驗證碼矩形框隨機賦值干签，繼續(xù)第二步的操作新增動作中選擇設(shè)置文本，配置動作選中驗證碼矩形框拆撼，下方的文本賦值中容劳，點擊fx，插入字符串函數(shù)[[random_str.substr(random_str.length*Math.random(),1)]]闸度，插入4遍竭贩，每一遍之間用空格隔開，這段函數(shù)表達(dá)的是從全局變量那一串內(nèi)容中莺禁，隨機抽取一個字符留量，插入4遍，即表示抽取4個字符哟冬。將用例復(fù)制到矩形框單擊事件中楼熄。
按下F5預(yù)覽驗證效果柒傻，看下是不是點擊文字和驗證碼孝赫，驗證碼是不是隨機刷新了，祝你成功红符。
總結(jié)：本案例的難點在于字符串函數(shù)[[random_str.substr(random_str.length*Math.random(),1)]]的應(yīng)用青柄，對于沒有接觸過開發(fā)的同學(xué)來說，這點可能很難想到预侯，也不一定明白其中的意思致开，通過這次的接觸，大致了解意思即可萎馅，希望本案例的講解双戳，能夠?qū)δ阌兴鶐椭?/p>
如果你對Axure或原型設(shè)計有興趣，希望系統(tǒng)性地學(xué)習(xí)Axure知識糜芳，掌握更多Axure使用技巧飒货；或者希望通過臨摹交互案例魄衅，進(jìn)一步提升高保交互設(shè)計能力。請點擊下方關(guān)注按鈕塘辅，查看更多連載作品晃虫。
