美文网首页
如何设置获取验证码的倒计时

如何设置获取验证码的倒计时

作者: 涛涛记得笑 | 来源:发表于2021-06-20 17:26 被阅读0次

    想要达成的效果:点击获取验证码时,验证码倒计时开始,从59往后开始递减1

    思路分析:从动作开始看,点击控件,触发倒计时,然后倒计时到0结束。

    这个动作看出,这是两组不同的交互触发动作,先有点击,然后触发倒计时,最后倒计时开始执行;

    首先解决的就是点击后显示倒计时,这个动作,这里用到显示及隐藏,此时可以做两个矩形,一个是点击获取验证码,一个是显示隐藏按钮,这个隐藏按钮的文字就是倒计时的数字(注意后面的s搭配)

    其次,这是最关键的一点这个控件如何执行数秒倒计时,你要知道矩形文本并不具备这个特点,需要用函数触发他,这个触发就是个动作,这个时候需要引入动态面板来辅助,叫做辅助的动态面板;

    动作:辅助面板里有个显示触发的交互,记住一点,axure里复杂交互借助动态面板

    利用显示动态面板并添加显示事件的二次回滚就会赋予他触发的值

    首先卡死的就是这个数字的极限,不能小于0,因为你函数触发时,会一直执行下去

    然后每次触发时候的等待时间,再然后就是设置这个文字使用函数运算。

    最后,别忘记,面板只是辅助,最后要隐藏起来再显示,这才是个循环。

    那如果倒计时结束,如何再次获取呢?

    先不要看任何的设置动作,如果倒计时为0,是不是重新获取按钮自动显示出来,自动显示出来后,可以再次点击,然后再次触发倒计时的进行,这一组动作是不是就是我们所说的再次获取的逻辑,然后再想想,哪些是可以复用的动作?

    倒计时的触发就是可以复用动作。

    所以接下来步骤如下:首先控制这一组交互动作的动态面板,继续在动态面板接下设置(连贯的动作就可以这样),重新单击设置的事件,选择数据倒计时的文字为0时,显示重新获取,隐藏动态面板(因为需要重新触发,目前这个事件结束);

    然后再单击重新获取按钮,隐藏自身,设置数据倒计时等于60、显示动态面板;

    获取完以后,点击登录,如何跟勾选服务协议做联动?(勾选则跳转,不勾选则提示)

    用条件来判断这个事件,勾选是个选中的状态,如果选中状态为真则跳转,相反则弹窗,这是两个交互事件,用一个函数,两个并行的形式去实现。

    相关文章

      网友评论

          本文标题:如何设置获取验证码的倒计时

          本文链接:https://www.haomeiwen.com/subject/nglsyltx.html