使用动态面板实现60秒倒计时

AxureRP8.0教程 小楼一夜听春语 10784℃ 0评论

看到很多同学想知道60秒倒计时的实现过程,特此写下这篇教程。

首先,先来说说思路。

1、要有一个记录初始秒数和剩余秒数的容器,我们创建一个全局变量来记录。【步骤1】

2、要有一个获取验证码的按钮,和一个可以实现循环功能的元件-动态面板。动态面板可以通过切换状态实现循环,就必须有2个(含)以上的状态。【步骤2】

3、按钮默认为蓝色,点击后变成灰色。这需要为按钮预置禁用时的样式。【步骤3】

4、点击按钮时,要开启循环(【步骤4】)。并且,按钮不可再次点击(【步骤5】)。

5、循环时,如果时间记录大于“1”(【步骤6】),则要让秒数记录递减(【步骤7】)。并且,设置按钮显示最新时间与文字(【步骤8】)。

6、否则,即为倒计时结束。这时要让按钮显示文字“重新获取验证码”(【步骤9】),并且将时间记录恢复为“60”(【步骤10】),按钮也要重新变成可点击的状态(【步骤11】),最后还要停止循环(【步骤12】)。

注意:先读懂上述内容,才能很好的理解下面的实现过程。

接下来,是具体实现步骤。

1、在【项目】菜单中,点击【全局变量】,添加一个新的全局变量“TimeValue”。

d1

2、在画布中放入一个矩形按钮,命名为“GetButton”;再放入一个动态面板,命名为“LoopPanel”;双击动态面板,点击“+”,为其添加一个新的状态“State2”(这一步是为了保证动态面板能够切换状态)。

d2

3、为按钮“GetButton”设置【禁用】状态的交互样式,【填充颜色】为灰色。

d3

4、为按钮“GetButton”添加【鼠标单击时】的用例,设置动作为【设置面板状态】于动态面板“LoopPanel”,选择状态【Next】,勾选【向后循环】,设置自动循环间隔为【1000】毫秒,取消【首个状态延时1000毫秒切换】的选项。

d4

5、继续添加动作【禁用】【当前元件】。

d5

6、为动态面板“LoopPanel”的【状态改变时】添加第一个用例并设置条件,条件设置为【变量值】【TimeValue】【>】【值】“1”。

d6

7、添加满足条件的动作为【设置变量值】【TimeValue】为【值】“[[TimeValue-1]]”。

d7

8、继续添加动作,【设置文本】于“GetButton”为【值】“[[TimeValue]]秒后可重新获取”。

d8

9、为【状态改变时】再次添加用例,设置不满足第1个用例的条件时执行的动作。第1个动作为【设置文本】于“GetButton”为【值】“重新获取验证码”。

d9

10、第2个动作为【设置变量值】为【值】“60”。

d10

11、第3个动作为【启用】按钮“GetButton”。

d11

12、第4个动作为【设置面板状态】于动态面板“LoopPanel”,选择状态为【停止循环】。

d12

最后,按“F5”键,在浏览器中查看做好的原型效果。

这个案例,我没有污,规规矩矩的写出了整个案例过程。这个教程应该是实现这个案例最简洁的方法,你看我屌不?

源文件下载地址:http://downloads.iaxure.com/60sTimer.rp


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 使用动态面板实现60秒倒计时

喜欢 (85)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(13)个小伙伴在吐槽
  1. 全局变量的值60在新建时有一个默认值的话,是不是后面就不需要再赋值60了?
    2016-11-13 20:57 回复
    • 不赋值,再次点击怎么办?
      小楼一夜听春语2016-11-13 22:58 回复
  2. 使用动态面板实现60秒倒计时,这东东看似简单也不简单,总的来说还是很好操作的
  3. 不看
    文良颜丑2016-11-15 09:24 回复
  4. 做完之后,突然明白了原理,突然觉得自己好笨啊,感谢您的分享
    菜花依旧2016-12-01 16:14 回复
    • 哈哈,大家都差不多
      Ian2016-12-21 15:25 回复
  5. 屌,你最屌
    dyhwowmm2016-12-05 11:19 回复
  6. 改了点东西,用一个控件值把全局变量换掉了,可以放在自己的原件库里了 :mrgreen: http://pan.baidu.com/s/1nuH1zRz
    蛋疼的柱子2016-12-09 16:50 回复
  7. 吊炸天
    ep2016-12-17 13:35 回复
  8. 不看
    谢谢2016-12-18 19:17 回复
  9. 为什么按步骤操作完,点击F5预览只看个重新获取验证码呢
    啦啦啦啦啦了2017-01-12 16:17 回复
  10. 屌屌屌,你嘴屌
    baobykx2017-03-12 18:16 回复
  11. 不看我晕针,这貌似复杂了
    Bloo2017-03-27 09:56 回复