快好知 kuaihz

Axure教程:进阶版倒计时

这个原型是作者根据上一篇文章《Axure教程:获取验证码倒计时的实现》,发散思维想到去做的一个原型案例,在这里分享出来,希望可以帮助到一样刚起步的产品小白。

如果该教程较难,建议先观看我做的第一个倒计时(简单版),操作步骤更为详细:http://www.woshipm.com/rp/3133460.html。

开门见山,我们先来看看效果↓

预览图:

预览网址:https://jxvo3f.axshare.com

所需元件

一个命名为“触发器”的动态面板(两个面板状态)、一个命名为“秒”的矩形,并填入文字“10”、一个命名为“分”的矩形,并填入文字“01”、一个命名为“时”的矩形,并填入文字“01”、两个“:”矩形、一个填充色为黄色的背景矩形

操作步骤

(1)设置动态面板交互——载入时

这个交互的作用是一直触发动态面板的下一个交互——状态改变时。

(2)设置动态面板第二个交互——状态改变时(Case 1)

这里就不列举详细操作步骤了,较为详细的步骤就在我的开头的文章里面有介绍。

Case1的作用是:“当“秒”矩形内的数值大于0时则自减1”。

(3)设置动态面板第三个交互——状态改变时(Case 2)

Case2里多了一个条件,那么Axure如何设置多个条件呢?只需要在“编辑条件”里面再点击一下红圈里面的加号即可添加多一个条件了。

Case2的作用是:“当“秒”矩形数值为0时,“分”矩形数值减1,“秒”矩形数值设为59”。

(4)设置动态面板第四个交互——状态改变时(Case 3)

Case3的作用是:“当“秒”矩形数值为0且“分”矩形数值也为0时,则“时”矩形数值减1,且“分”矩形数值设为59,“秒”矩形数值设为59”

(5)大功告成,按F5预览看看效果

小记

(1)如果预览时觉得看数值变化太慢了,可以把动态面板的交互——载入时的循环间隔时间设置为1ms。

(2)这个原型有一个缺陷,就是当倒计时倒数到个位数时,无法显示为“09、08、07”这样子,在个位数前面补0,当然简单的替换方案就是在“时”“分”“秒”矩形前面加一个隐藏的0,并设置显示时的条件为:“当“时”“分”“秒”矩形内的数值低于10时显示并在大于10时隐藏即可”。但是如何通过函数实现,期望有大佬可以来讲解一下。

(3)该原型的适用场景有很多,比如说现在许多商城的限时抢购都会用到时分秒的倒计时。学会了就可以应用在这些场景里面了(๑•̀ㅂ•́)و✧

(4)正式使用时,记得要将仅仅用来实现倒计时功能的动态面板隐藏掉。这里我为了展示效果所以没有隐藏。

(5)这个原型是根据我的上一篇文章《Axure教程:获取验证码倒计时的实现》,发散思维想到去做的一个原型案例,在这里分享出来,希望可以帮助到和我一样刚起步的产品小白。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:Axure教程:进阶版倒计时  进阶  进阶词条  倒计时  倒计时词条  教程  教程词条  Axure  Axure词条  
原型

 Axure完成前端开发可行性探索

曾经有产品经理使用Axure做个人博客,并发布上线。Axure到底有多少潜力?能否可以挑战更多的开发项目成为直接上线可用的产品?笔者正好利用2020年超长的春节...(展开)

原型

 Axure教程:简单开关按钮的实...

笔者在本文中介绍了如何用Axure实现开关按钮效果的操作步骤,与大家分享。所需元件一个命名为“容器”的矩形一个命名为“关”的椭圆一个命名为“开”的椭圆操作步骤(...(展开)