Axure教学(中级):验证码发送倒计时

本文介绍了如何使用Axure制作验证码发送倒计时功能。通过设置页面布局,添加交互,调整细节,最终实现倒计时结束后显示"重新获取"并允许重新发送验证码的预览效果。
摘要由CSDN通过智能技术生成

生活中,我们经常看到网站、APP的注册页面,当点击发送验证码后,会进入倒计时,计时结束后才能重新点击发送。

一、页面布局

从左侧元件库拉入一个【矩形】作为验证码按钮,两个【文本框】作为手机输入框和短信验证码输入框,如下:

Axure教学(中级):验证码发送倒计时

首先双击【验证码矩形】,将文本设置为:发送验证码;

其次,点击【顶部菜单栏】-》【项目】-》【全局变量】,点击弹窗中的“+”号,添加验证码的【全局变量】,这里命名为:captcha;想从哪个数字开始倒计时,即将此变量的默认值设置为哪个数字(此案例设为10);

Axure教学(中级):验证码发送倒计时

二、添加交互

实际效果为:当点击验证码按钮时,验证码文案会变为“10秒后重新获取”,接下来变为9、8、7……秒后重新获取。

实现流程为:选中验证码矩形,双击右侧【属性】栏中的【鼠标点击时】;

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值