原型设计工具Axure RP入门教程(十一):计时器教程

翻译|使用教程|编辑:况鱼杰|2020-04-03 11:02:23.530|阅读 101 次

概述:在本教程中,您将学习如何使用交互循环制作一个以秒为单位递增或递减的计时器。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具, 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格。

免费下载Axure RP 优惠购买Axure RP


在本教程中,您将学习如何使用交互循环制作一个以秒为单位递增或递减的计时器。

提示:您可以使用此交互循环的基本结构来创建要无限期发生的任何类型的交互。

小部件设置

  • 打开一个新的RP文件,然后在画布上打开Page 1。
  • 将一个矩形小部件拖到画布上。

创建一个计数器变量

  • 在顶部菜单中,转到项目→全局变量。
  • 在全局变量对话框中,单击添加以添加新变量。将其命名为CounterVar,并将其默认值设置为0。
  • 单击确定关闭对话框。
计数互动

页面加载时显示变量的值

  • 单击画布上的空白点以选择页面本身。
  • 在交互窗格中单击新建交互。
  • 在出现的列表中选择页面加载事件,然后选择设置文本操作。
  • 在目标下拉列表中选择矩形小部件。
  • 在设置为下,选择变量的值。 然后在变量下拉列表中选择CounterVar变量。
  • 单击确定以保存操作。

递增变量的值


  • 单击页面加载块底部的“ +”插入动作图标,然后在出现的列表中选择设置变量值动作。
  • 在目标下拉列表中选择CounterVar。
  • 在值字段中,输入[[CounterVar + 1]]。(在Web浏览器中执行该操作时,带括号的表达式会将变量的当前值加1。)
  • 单击确定以保存操作。

使用等待动作设置循环间隔

  • 再次单击页面加载块底部的插入操作图标,然后在出现的列表中选择等待操作。
  • 在ms字段中保留1000,然后单击OK保存操作。

通过再次触发页面加载事件来创建循环

  • 最后一次单击页面加载块底部的插入动作图标,然后在出现的列表中选择Fire事件动作。
  • 在目标下拉菜单中选择页面,然后单击添加事件。
  • 在事件列表中选择页面加载,然后单击确定以保存操作。

预览互动

预览页面并观看矩形文本以秒为单位的计数。


附加信息和提示
倒数
要使计时器倒计时,请将CounterVar变量的默认值设置为所需的时间(以秒为单位)。例如对于五分钟计时器(5 x 60)使用默认值300。然后,不用增加变量的值,而使用以下表达式减少它:[[CounterVar-1]]

将计时器停止在某个值

为防止计时器超过某个值,请在页面加载情况下添加以下条件之一:

如果计数开始时:

value of variable — CounterVar — is less than or equals — value — (stop time in seconds)


如果计数结束时:

value of variable — CounterVar — is greater than or equals — value — (stop time in seconds)
将时间显示为分钟和秒

要以分钟和秒为单位设置计时器格式,请通过在设置为拖放列表中选择文本,在设置文本操作中将矩形窗口小部件的文本设置为以下表达式之一:
没有前导零:

[[Math.floor(CounterVar/60)]]:[[CounterVar%60]]
前导零:

[['0'.concat(Math.floor(CounterVar/60)).slice(-2)]]:[['0'.concat(CounterVar%60).slice(-2)]]


想要获得Axure RP更多资源、正版授权的伙伴,请咨询【慧都客服】了解

关注慧聚IT微信公众号☟☟☟,了解产品的最新动态及最新资讯。

慧聚IT



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Axure Software https://docs.axure.com/axure-rp/tutorials/timer/

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Axure RP

产品原型设计、网站原型设计、应用程序设计的主流工具与软件

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat