??许多小伙伴还不会使用Axure?RP8制作倒计时获取短信验证码效果,今天小编就带来了关于Axure?RP8制作倒计时获取短信验证码效果的教程。
??要实现倒计时的功能在AXURE中需要借助两个元件配合才能完成,一个元件是“获取短信验证码”的按钮;另一个元件是动态面板;同时还需要一个变量;变量在这里相当于一个计时器,我们先把变量设置为60时,一旦启动了,就从60一直倒计时到0;
![1.png](http://m.size12records.com/mydown-img1/2018-04-04/6a43f2e181a8dce280e45db0acb7b4b5.png)
??1、拖一个矩形,设置好长宽高,并命名为SendSMS;
![](http://m.size12records.com/mydown-img1/2018-04-04/ccd5810e8ac99a6f23dfb18ff4a5e67d.png)
??2、拖一个动态面板,随便放一个位置都可以,(本例放在矩形框上方一点),将动态面板命名为Clock,并设置两个状态,分别为状态1、状态2;
![](http://m.size12records.com/mydown-img1/2018-04-04/9f3e21629bffedd09ea8610a370e5182.jpg)
??3、设置一个变量,等赋值之后,作为开始倒计时作用;
![](http://m.size12records.com/mydown-img1/2018-04-04/3bf43242e2cf51ca8ef6f4c7657096a6.jpg)
??4、上述三步准备工作做好后,咱开工设置吧;首先选中矩形框SendSMS,编辑用例“鼠标单击时”,给变量Daojishi设置一个初始值60,意为从60秒开始倒计时;
![](http://m.size12records.com/mydown-img1/2018-04-04/c3be4d3ea299487d367f1fcf81bf9ffa.png)
??5、紧接着设置动态面板Clock中的状态1、状态2,循环着切换状态,1000毫秒切换一次;这举是为了触发动态面板的“面板状态改变时”事件。
![](http://m.size12records.com/mydown-img1/2018-04-04/99bb4668f31d02e52f4bab3941e2a837.png)
??6、设置动态面板Clock“状态改变时”事件,新增条件在变量Daojishi>0的情况下,设置矩形框SendSMS里文字变更为“Daojishi秒后重新获取”。
![](http://m.size12records.com/mydown-img1/2018-04-04/67dd2ae13e0419aaebd59ab6281fa8b7.png)
![](http://m.size12records.com/mydown-img1/2018-04-04/b6789b6ea01b5511fc7361d2f6d35472.png)
??7、设置Daojishi变量值自减1,意为判断在每次当变量值Daojishi>0时,动态面板Clock第1秒切换一次状态时,而Daojishi值由60变成59;再1秒后循环切换到下一状态时,Daojishi值由59变成58;以此类推...
![](http://m.size12records.com/mydown-img1/2018-04-04/16c2151710bee09f864da41a02b91ef2.png)
??8、最后再设置一下当Daojishi值自减到0时的情况,设置动态面板不再切换状态了,即设置Clock为停止循环;
![](http://m.size12records.com/mydown-img1/2018-04-04/2629fdf74af289dd533a4bb24f90bbbd.png)
??9、此时SendSMS矩形框内的文字停止在“0秒后重新获取”,不再倒计时了;但不符要求,需要调整为“重新获取验证码”,操作如下图所示:
![](http://m.size12records.com/mydown-img1/2018-04-04/7a032ec8a4a2e822be8a790180ac633b.png)
??10、至此所有设置已完成,咱预览下效果如下:
![](http://m.size12records.com/mydown-img1/2018-04-04/cc4dfe9e8409c866ea94c9d3f39015c3.png)
![](http://m.size12records.com/mydown-img1/2018-04-04/4f7c4e789871ce69c265fb9a65bbe54e.png)
??短信验证码通常出现在登录、注册、忘记密码等场景下需要用户手工点击“获取短信验证码”按钮来触发系统发短信,同时按钮会改变成倒计时状态.
??上面就是为各位亲们带来的Axure?RP8制作倒计时获取短信验证码效果的教程,一起去了解了解吧。