计时器 | Timer

在本教程中,你将学习如何使用交互循环,来制作一个可以向上或向下计数的计时器。【原型预览】

提示:你可以使用这一交互循环的基本结构,来创建任何你想要一次次重复发生的交互。

查看闪烁文本教程,来了解交互循环的另一案例。

1、元件设置
  1. 打开一个新的RP文件,并在画布中打开Page 1
  2. 拖拽一个矩形元件到画布中。
2、创建一个计数器变量
  1. 点击顶部菜单中的项目>全局变量设置
  2. 全局变量对话框中,点击添加来添加一个新的变量,将其命名为“CounterVar”,并设置它的默认值为0。
  3. 点击确定按钮关闭对话框。
3、计数交互

当页面载入时显示变量的值

  1. 点击画布中的空白区域以选中页面本身。
  2. 点击交互面板中的新建交互
  3. 在弹出的列表中选择页面载入时事件,然后选择设置文本动作。
  4. 目标下拉列表中选择矩形元件。
  5. 设置为下面,选择变量值,然后在变量下拉列表中选择CounterVar变量。
  6. 点击确定按钮保存操作。

增加变量的值

  1. 点击页面载入时区域底部的“+”插入动作图标,然后在弹出的列表中选择设置变量值动作。
  2. 目标下拉列表中选择CounterVar
  3. 字段中,输入“[[CounterVar+1]]”。(在Web浏览器中,括号中的表达式就会将变量当前的值加1。)

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

  1. 再次点击页面载入时区域底部的插入动作图标,然后在弹出的列表中选择等待动作。
  2. 保留毫秒字段中的1000,点击确定按钮保存操作。

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

  1. 最后一次点击页面载入时区域底部的插入动作图标,然后在弹出的列表中选择触发事件动作。
  2. 目标下拉列表中选择页面,然后点击添加事件
  3. 在事件列表中选择页面载入时,然后点击确定按钮保存操作。
4、预览交互

预览页面,观察矩形框中的数字在逐秒增加。

附加信息和提示

计数递减

如果想要实现倒计时的效果,那么将CounterVar变量的默认值设置为你期望的秒数。比如5分钟的倒计时就设置为300(60*5)。

然后修改设置变量值的表达式为“[[CounterVar-1]]”以实现递减效果。

当达到某个值后停止计时

为了防止计时器超出指定的数值,在页面载入时事件下增加一个条件,条件如下:

  • 如果正向计时:
变量值 – CounterVar - <= - 值 - (以秒计的停止时间)
  • 如果倒计时:
变量值 – CounterVar - >= - 值 - (以秒计的停止时间)

以分和秒来显示时间【原型预览】

如果要以分和秒的格式来显示计时器,在设置文本动作下,在设置为的下拉列表中选择文本,然后将矩形元件的文本设置为以下任何一个表达式。

不包含前导0:

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

包含前导0:

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

备注:你可以在我们的数学、函数和表达式文章中了解这些表达式中使用的函数。

评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注