在电商产品中,很多有限时促销、限时特价等活动,这时候就会有一个倒计时,不仅有时分秒,还有一个更小的单位,数字速度飞快地递减,给你一种再不买就来不及的紧迫感,我用Axure也做了一个这样的效果,不足之处请指出。
1.先设置一个动态面板,命名为:“倒计时动态面板”,设置两个空白状态就行,该面板作用就是用来触发的,所以可以隐藏
2.电商页面载入时自动开始倒计时,甚至在后台一直在倒计时,我这设置了两个按钮用来触发:“倒计时开始”按钮和“倒计时停止”按钮
3.文字“时”“分”“秒”固定显示的,对齐就行,不需要其他操作,用“:”也行
4.拖入四个文本标签,文本值分别为1,2,3,4,代表时分秒和毫秒,故元件分别命名为:“时”,“分”,“秒”,“毫秒”
5.然后需要先对两个按钮进行设置,单击“倒计时开始”按钮,设置“倒计时面板”状态:倒计时面板to Next循环 循环间隔100毫秒,首次改变延时。单击“倒计时停止”按钮自然就设置为停止循环啦
6.根据我们要实现的效果,毫秒递减顺序是n-0-9-0循环(ps:因为1秒等于1000毫秒,所以设置动态面板100毫秒改变一次状态,毫秒数循环一次正好1秒),秒和分递减顺序是n-0-59-0循环,这里没有天数,所以时的递减顺序就是n-0,(n代表当前显示的数字),因此,对“倒计时动态面板”进行操作,添加情形,情形1:如果毫秒!=0,设置文本,值fx添加局部变量VARY1,元件文字,毫秒,插入[[VARY1-1]]
7.情形2:当毫秒==“0”and秒!=“0”时,设置文本:对秒设置局部变量VARY2,文本值为VARY2-1,毫秒设置为9
8.情形3:当秒==“0”and分!=“0”时,设置文本:对分设置局部变量VARY3,文本值为VARY3-1,秒设置为59,毫秒设置为9
9.情形4:当分==“0”and秒=“0”and时!=“0”时,设置文本:对时设置局部变量VARY4,文本值为VARY4-1,分设置为59,,秒设置为59毫,秒设置为9
10.最后情形5:当时分秒和毫秒都==“0”时,“倒计时面板”状态停止改变
好啦,F5预览查看效果
第一次做这个效果,有错误请大神指出帮助进步,谢谢谢谢!!