Axure制作:时分秒的倒计时

2025-09-30 06:28:46

1、新建2个文本标签,及3个文本框:

如下图所示:

Axure制作:时分秒的倒计时

2、3个“文本框”分别命名:hour、 Minute、second,尺寸大小为20:*25

“文本框”需要隐藏边框

2个“文本标签”设置内容为":",尺寸为20*20

并按下图方式布局:

Axure制作:时分秒的倒计时

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

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

5、“文本框:second”的“文本改变时”有4个判定动作~

Axure制作:时分秒的倒计时

6、条件1:

---

判断“文本框:second”值大于10

---

Axure制作:时分秒的倒计时

7、动作1:

---

1.等待1000毫秒(即等待1秒)

2.设置“文本框:second”内容为:“[[This.text-1]]”(即数值减少1)

---

Axure制作:时分秒的倒计时

8、条件2:

---

判断“文本框:second”值大于等于1

---

Axure制作:时分秒的倒计时

9、动作2:

---

1.等待1000毫秒(即等待1秒)

2.设置“文本框:second”内容为“0[[This.text-1]]”(即数值减少1)

(前缀加个0,保持十位数有个0)

---

Axure制作:时分秒的倒计时

10、条件3(同时满足):

---

1.判断“文本框:second”值等于00

2.“文本框:minute”大于10

---

Axure制作:时分秒的倒计时

11、动作3:

---

1.设置“文本框:second”内容为“59“

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

---

Axure制作:时分秒的倒计时

Axure制作:时分秒的倒计时

12、条件4:

---

判断“文本框:second”值等于00

---

13、动作4:

---

1.设置“文本框:second”内容为“59“

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

(前缀加个0,保持十位数有个0)

---

Axure制作:时分秒的倒计时

Axure制作:时分秒的倒计时

14、“文本框:second”的“载入时”动作:

---

触发“文本框:second”的“文本改变时”的操作~

---

*如果不明白这个动作意义,可以尝试删除此动作看看哦,呵呵……

Axure制作:时分秒的倒计时

Axure制作:时分秒的倒计时

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

Axure制作:时分秒的倒计时

16、条件1:

---

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

---

17、动作1:

---

1.设置“文本框:minute”内容为“59“

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

---

Axure制作:时分秒的倒计时

Axure制作:时分秒的倒计时

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

Axure制作:时分秒的倒计时

19、条件1:

---

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

---

Axure制作:时分秒的倒计时

20、动作1:

---

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

---

Axure制作:时分秒的倒计时

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

Axure制作:时分秒的倒计时

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

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢