Axure RP 9 获取验证码发送倒计时

一、页面布局

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

第二步:

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

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

实现流程为:选中验证码矩形,右侧点击交互,点击新建交互

 选择鼠标单击时,设置文本,勾选【当前元件】-》设置文本的值为“[[captcha]]秒后重新获取”;

然后点击加号,选择等待,时间设为“1000”毫秒

 再次点击加号,选择设置变量值,选择captcha,值设置为:[[captcha-1]]

 

 需要重新触发最先的点击按钮交互事件,让验证码的文本发生变化,即变为:“9秒后重新获取”;并且重复执行该交互。因此,再次点击加号,选择【触发事件】-》勾选【当前元件】-》勾选【鼠标单击时】

正常情况下,应该是倒计时为0秒时停止计时,按钮文本变为“重新获取”。点击重新获取,则重新执行倒计时效果。

因此,需要对全局变量进行判断,当全局变量大于等于0时,执行上面的交互。否则(小于0),直接让文本变为 “重新获取”;

并且让全局变量【captcha】重新设置10,这样,重新点击【验证码】按钮时,由于全局变量【captcha】大于0,才能够重新执行鼠标点击的交互事件。

给鼠标单击事件添加条件,当变量值【captcha】>=0时,执行事件

 

再次点击Enable Cases,添加条件,使其小于0

 在用例2下点击加号,选择设置文本,勾选【当前元件】-》设置文本的值为“重新获取”

 再次点击加号,【设置变量值】-》勾选【captcha】,值设置为:10

 结束,倒计时发送验证码重新获取设置完成,预览效果

猜你喜欢

转载自www.cnblogs.com/qinmei/p/11585109.html