肥猫SEO论坛»论坛首页 › 行业交流 › 软件下载 › Axure教程：短信验证码实现倒计时

高端网站建设可签合同可上门沟通	站群程序定制/蜘蛛池租用	全行业SEO接单QQ1624516415	全行业SEO接单QQ1624516415
2000+站点外链一键通发	原创SEO文章代写【点击】	点击加入本站VIP 发帖免审核	广告位招租

honghu2

23万积分	0 好友	7万主题

发消息

Axure教程：短信验证码实现倒计时

TA的其它主题

发表于 2021-9-26 14:31 | 查看: 452| 回复: 0

Axure教程：短信验证码实现倒计时

编纂导读：本文跟大师分享，若何用Axure实现短信验证码倒计时结果，作者从预览图，到所需基来源根基件，再到操作步调都聊天呗逐一开展了阐发，并对进程中必要注重的问题举行了先容，但愿对你有所开导。

这个是新用户注册交互，利用到了验证码倒计时，本文只针对验证码倒计时功效做诠释，不合错误用户名填写完备举行果断，以下图：

图1

此中暗藏了动态面板往返切换的状况，为了举行验证码秒数递减，以下图2：

图2
01 根基元件
一、文本标签*2

二、动态面板*1（2个状况定名为：圆形；矩形）

三、倒计时按钮*1

思绪：

一、实现验证码倒计时要用到函数[[Math.random()]]、[[Math.exp()]]和[[substring(from,to)]]

[[Math.random()]]这个函数会随机取0~1之间的数字，详细取小数点几位，网上没有阐明，我这里试了一下获得位数大致在15-18位之间，这个影响不大；

[[Math.exp(x)]]是获得一个数值的指数，例[[Math.exp(2)]]：暗示e的2次方的数值；

[[substring(from,to)]]是取截止的字符串的，例[[V.substring(2,7)]],此中V=2343242342：暗示截取的数值为432423；

这里针对随机天生6位数字验证码做具体阐明，后面临函数就一律而过了

这里取验证码就是上面三个函数来天生，可能有更简略的法子，我以前也用两个函数试过，可是总会呈现bug，因为 [[Math.random()]]函数可能获得很是小，如：0.00000211，就会呈现验证码天生不是六位，为此测验考试了不少，终极为了100%天生随机6位数就用了3个函数组合：[[(Math.exp(Math.random())*1000000).substring(1,7)]]，暗示：随机取一数值的指数函数*1000000的数值，然后截取数值的第1位到第7位。这里乘以1000000是为了去除小传说新闻网数点；

二、点击验证码后要显示倒计时，这里的倒计时要操纵动态面板来反转展转换显示秒数，如上图2；
02 具体添加交互（只针对验证码倒计时功效做诠释，不合错误用户名填写完备举行果断）
一、添加按钮，修更名称：验证码，（设置交互样式：禁历时-填充灰色）

二、拖入2个文本标签（一个定名：显示文本；另外一个定名：s（设置为暗藏））

三、添加动态面板（定名为：简约验证码）

四、验证码添加动作：单击时-设置变量值-禁用-期待-显示-设置文本，以下图：

4.1 设置变量值（这个是全局变量，益处是可以按照必要更改验证码的倒计时的时长）

4.2 在设置面板状况（下一项-向后轮回-轮回距离1000s（为了实现验证码数值递减））

4.3 在禁用验证码-期待1000s-显示s（在这里暗藏了一个文本，秒s）

4.4 设置文本

就是前面提到的函数[[(Math.exp(Math.random())*1000000).substring(1,7)]]

03 动态面板添加动作

动态面板的动作为了果断要不要遏制轮回，这里不做多诠释。

本文由 @鑫小包快猫视频原创公布于人人都是产物司理，未经允许，制止转载

题图来自 Unsplash，基于 CC0 协定

收藏0 回复显示全部楼层道具举报

返回列表

		自动登录	找回密码
密码			立即注册