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

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

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

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

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

涉及知识点:

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步,调整函数值(其他步骤查看上一篇

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

设置文本值为:

[[(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使用函数实现时分秒电子时钟补零效果(下)

年-月-日 时:分:秒

[[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 函数】之字符串函数概览

原创文章,作者:院长大大,如若转载,请注明出处:https://www.axureschool.cn/291148.html

发表评论

登录后才能评论