【案例教程】Axure使用函数实现时分秒电子时钟补零效果（下）

上一篇【案例教程】Axure实现移动端顶部栏时分秒电子时钟效果（上）讲到移动端顶部栏时分秒实时变化的实现过程，最后的效果也确实实现了时分秒的实时变化。

不过还是有些不完美，在显示时如果时分秒不足两位数，就会出现“9:48:1”这种情况，而实际日常使用大部分会显示“09:48:01”，这样看起来更整齐美观

要实现这个效果除了用到时间函数，还需要用到字符串函数

涉及知识点：

LVAR.length

返回字符串的字符长度，包括空格

[[ “Hello, world!”.length ]] -> 13

LVAR.concat(‘string’)

将括号中的字符串（连接）添加到调用函数的字符串中

[[ “Hello”.concat(“, world!”) ]] -> Hello, world!

LVAR.substr(start,length)

返回字符串的片段，从起始索引处的字符开始，一直持续到达到指定长度。

可以选择省略长度以在字符串末尾结束。可以提供负索引以从字符串末尾向后计数，如下面的第三个示例所示。

[[ “Hello, world!”.substr(3, 7) ]] -> lo, wor

[[ “Hello, world!”.substr(3) ]] -> lo, world!

[[ “Hello, world!”.substr(-6, 5) ]] -> world

预览效果

www.youzhifang.net/axure/prototype/ZS/ZS0018-1

关键步骤

修改第8步，调整函数值（其他步骤查看上一篇）

设置文本值为：

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

修改之后，就可以得到时分秒补零的效果了

年-月-日 时:分:秒

[[Now.getFullYear()]]- [[(0.concat(Now.getMonth())).substr((0.concat(Now.getMonth ())).length-2,2)]]- [[(0.concat(Now.getDate())).substr((0.concat(Now.getDate())).length-2,2)]] [[(0.concat(Now.getHours())).substr((0.concat(Now.getHours())).length-2,2)]]: [[(0.concat(Now.getMinutes())).substr((0.concat(Now.getMinutes())).length-2,2)]]: [[(0.concat(Now.getSeconds())).substr((0.concat(Now.getSeconds())).length-2,2)]]

原型下载

相关教程：

【Axure 函数】之时间日期函数概览

【Axure 函数】之字符串函数概览