养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

Axure原型工具如何制作随机验证码的效果

时间:2024-10-19 16:25:23

在日常使用网站的时候,登录某网站时都需要输入一些验证码,这些验证码有数字、大写字母恽但炎杰和小写字母,现在为了防止刷验证码,都出现了图片验证码和文字验证码等效果,那么通过Axure原型工具如何制辑湃形傥作随机验证码的效果呢,下面小编介绍一下。

工具/原料

电脑

Axure

方法/步骤

1、首先创建一个空白页面,在工作区域内拖入本次使用的元件元素,为了达到效果小编用了图片,后面会介绍到,如下图所示。

Axure原型工具如何制作随机验证码的效果

2、元件准备完成后,将图片导入到工作区域内,敛财醣沁并将大写字母、小写字母以及数字输入到文字标题中,一会做交互事件的时候从这里面取值,如下图所示。

Axure原型工具如何制作随机验证码的效果

3、最重要的一个环节,对所有元件的名称进行设置,如下图所示。

Axure原型工具如何制作随机验证码的效果

4、然后我们可以对背景图片的样式进行设置,比如获取文字的大小、颜色以及字体样式等等,如下图所示。

Axure原型工具如何制作随机验证码的效果

5、下面给图片的页面载入时的交互事件进行设置,主要是通过函数的方式从文字中获取随机字母或数字,如下图所示。

Axure原型工具如何制作随机验证码的效果

6、同样,我们知道验证码看不清聍垅钼涮楚的情况下,点击图片,验证码还会随机生成,那么我们再给图片的单击事件做一个交互,方法同上,函数也一样,如下图所示。

Axure原型工具如何制作随机验证码的效果

7、最后,把取验证码的文字隐藏掉,载入的时候看不到,只留下图片,如下图所示。

Axure原型工具如何制作随机验证码的效果

8、所有工作准备完成,f5预览一下效果,如下图所示。载入时会产生一个随机的验证码,点击图片的时候还会随机生成。

Axure原型工具如何制作随机验证码的效果

Axure原型工具如何制作随机验证码的效果

© 一点知识