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

 时间:2026-02-14 09:09:04

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • axure怎么设置弹框动画?
  • Unity 如何实现物体前后移动,左右旋转
  • Axure实现输入框输入时提示效果
  • Axure中制作高保真必填文本框
  • 教大家使用Axurer制作加减数字按钮
  • 热门搜索
    梅雨季节是什么时候 脑震荡有什么后遗症 中国智力运动网 加油费计入什么科目 able是什么意思 开业送什么花 三角形的外心是什么 运动图标 胎位rop是什么意思 撒有拉拉是什么意思