计时器 | 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)]]

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