如何使用Axure制作动态时间

如何使用Axure制作动态时间,第1张

使用Axure制作动态时间的方法

制作动态面板

在工作区拖入一个文本标签,右键单击,选择“转换为动态面板”,命名为“动态时间”。

有人可能直接从元件库拖入动态面板,这样也可以,但是我还是习惯直接通过右键的方式,这种方式制作的动态面板,不会受到面板区域限制而使某些元件不能显示。

制作动态面板

进入状态1(state1),再拖入一个文本标签,分别将两个文本标签命名为“日期”和“时间”,调整两个标签的位置。

制作动态面板

关闭状态,返回index页。在“元件管理”面板右键单击state1,选择复制状态,新状态为state2,不用修改两个状态的名称,因为不重要。

设置自动循环

选中动态面板,添加为“载入时”事件添加用例,选择“设置面板状态”,选中“动态时间”面板,状态为“Next”,勾选“向后循环”,时间为1000毫秒。

这样设置后,面板就会每隔一秒切换一次状态,并且一直在状态1和状态2之间无限循环。

整理时间日期函数

将以下信息整理至Notepad++备用

年:Now.getFullYear()

月:Now.getMonth()

日:Now.getDate()

时:Now.getHours()

分:Now.getMinutes()

秒:Now.getSeconds()

函数解释

日期函数不用解释了,下面解释我们要用到的其他函数。

LVAR.concat('string'):这个函数是在字符串后面附加字符串,这里使用的目的,是在月、日、时、分、秒的前面加上0,后面详解;

LVAR.substr(start,length):这个函数是从目标字符串的指定位置开始,截取固定长度的字符串,起始位置从0开始;

LVAR.length:取得目标字符串的长度。

实现思路分析

日期的获取和连接并不困难,这里的难点,是在如何将1位文字转换为2位文字,上一步提到的函数是关键。

以秒为例,先在获取到的秒前面加0,比如:010、05

我们最后要保留的是2位数,其实就是最后两位数,但是Axure中没有Right()函数,所以我们只能迂回取得。

1、获取添加0后的长度;

2、用长度减去2,作为截取字符串的起始位置;

3、截取的长度为2。

如:010,从字符串下标为1的位置开始,取两位,结果为10

05,从字符串下标为0的位置开始,取两位,结果为05

这就是我们要的效果

以秒为例写出相应函数:

[[(0.concat(Now.getSeconds())).substr((0.concat(Now.getSeconds())).length-2,2)]]

完善函数

按照秒的函数,我们依次写出月、日、时、分的函数,并进行组合,分别得到“日期”和“时间”的函数。

选中“动态时间面板”,为“状态改变时”事件添加用例,点击“设置文本”,勾选两个“日期”元件,填入日期函数,勾选两个“时间”元件,填入时间函数。

预览

完成以上一系列设置后,按F5预览效果。

首先肯定的是axure可以实现题主所说的效果。下面,就一步一步来 *** 作吧(以简单的一个按钮一个动态面板为例):

第一步:画一个按钮,

第二步:拖拽一个控制面板控件到页面中,这里我们只要动态面板State1,

第三步,现在我们来给按钮和动态面板添加事件。先把动态面板设置为隐藏第三步,现在我们来给按钮和动态面板添加事件。先把动态面板设置为隐藏

按钮添加“鼠标单击时”事件,让动态面板显示

动态面板添加“载入时”事件,让动态面板消失,这一步关键是添加一个“等待”事件

好了,动态面板将在3秒后自动消失。

EXCEL标中 选择--数据--数据有效性--选择 “设置--允许--序列--来源 ”--来源 中 输入 你想要的数字或者文字,可以在每个表格中输入 ,如果不懂可以联系我我再告诉你


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11537121.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存