多语言展示
当前在线:1909今日阅读:84今日分享:32

Axure制作:时分秒的倒计时

前段时间,做验证码验证的时候,介绍过一个“倒计时”案例【Axure制作:倒计时(获取验证码案例)】,那仅仅只是60秒以内的额倒计时……恩,今天介绍一个时分秒的“倒计时”案例,效果如下(4个样式,分别对应不同时、分、秒的倒计时变化):1Axure制作:倒计时(获取验证码案例)
工具/原料

Axure RP 8

方法/步骤
1

新建2个文本标签,及3个文本框:如下图所示:

2

3个“文本框”分别命名:hour、 Minute、second,尺寸大小为20:*25“文本框”需要隐藏边框2个“文本标签”设置内容为':',尺寸为20*20并按下图方式布局:

3

下面设置,时、分、秒的交互动作~

4

“文本框:second”的交互比较多,下面一一讲来~

6

条件1:---判断“文本框:second”值大于10---

7

动作1:---1.等待1000毫秒(即等待1秒)2.设置“文本框:second”内容为:“[[This.text-1]]”(即数值减少1)---

8

条件2:---判断“文本框:second”值大于等于1---

9

动作2:---1.等待1000毫秒(即等待1秒)2.设置“文本框:second”内容为“0[[This.text-1]]”(即数值减少1)(前缀加个0,保持十位数有个0)---

10

条件3(同时满足):---1.判断“文本框:second”值等于002.“文本框:minute”大于10---

11

动作3:---1.设置“文本框:second”内容为“59“2.设置“文本框:minute”内容为“[[lvar1-1]]”(设置“文本框:minute”为局部变量LVAR1)---

12

条件4:---判断“文本框:second”值等于00---

13

动作4:---1.设置“文本框:second”内容为“59“2.设置“文本框:minute”内容为“0[[lvar1-1]]”(设置“文本框:minute”为局部变量LVAR1)(前缀加个0,保持十位数有个0)---

14

“文本框:second”的“载入时”动作:---触发“文本框:second”的“文本改变时”的操作~---*如果不明白这个动作意义,可以尝试删除此动作看看哦,呵呵……

15

“文本框:minute”的“文本改变时“的交互动作:

16

条件1:---判断“文本框:minute”值等于0-1---

17

动作1:---1.设置“文本框:minute”内容为“59“2.设置“文本框:hour”内容为“[[lvar1-1]]”(设置“文本框:hour”为局部变量LVAR1)---

18

“文本框:hour”的“文本改变时“的交互动作:

19

条件1:---判断“文本框:hour”值等于-1---

20

动作1:---1.设置“文本框:hour”内容为“23“---

21

到这里就大功告成了,赶紧看下效果吧……

22

觉得不错,对你有帮助的话,请投个票,加个赞哦~

推荐信息