---
order: 8
navTitle: 计时器
---
# SuperPage组件-计时器

SuperPage提供了计时器组件，可以实现倒计时、秒表和定时循环等，如下图：

![计时器](./images/timer1.gif)

示例地址：[计时器](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E8%AE%A1%E6%97%B6%E5%99%A8)

## 使用计时器组件{#start}

计时器是一个“虚拟”组件，没有界面，在设置的时长内，按设置间隔定时触发在计时器上设置的[交互](../../design/action/README.md)动作，配合其他组件可以完成特定的效果。同时计时器状态也会发生变化，从而实现计数功能，状态包括秒表的秒数或倒计时剩余的秒数、当前时间、激活状态、触发次数等。

![操作步骤](./images/timer2.gif)

**操作步骤：**

1. **拖入计时器组件：** 在**组件区**>**其它**中将**计时器**组件拖入到画布中
2. **计时器设置：** 在**属性栏**>**计时器**下，选择计时器的类型为`秒表`，时长为`5`秒，间隔为`1`秒，更多设置查看[计时器设置](#settings)
3. **显示计时器时间：** 拖入[文本](../common/text.md)组件，设置内容为`${[计时器1].[秒]}`，文本会自动获取计时器返回的数据，并实时发生变化，更多效果查看[应用场景](#application)

## 计时器设置{#settings}

在**属性栏**>**计时器**中可对计时器的**类型**、**时长**、**间隔**、**启动方式**进行设置，可实现不同效果的计时器。

![计时器设置](./images/2021-02-04-10-33-30.png)

### 计时器类型{#type}

计时器支持**倒计时**、**秒表**和**自动循环**三种计时类型。在**计时器**>**类型**中设置：

- 倒计时：在设定的时长内按照间隔进行倒计时，直到时间为0秒时停止计时，可设置时长与间隔
- 秒表：从0秒开始计时，按照间隔显示时间直到设置的时长时停止计时，可设置时长与间隔
- 自动循环：按照设置的间隔自动循环，常用于循环播放多页面板，只可设置间隔，详细可查看[循环切换多页面板](#cycle)

不同类型可设置的属性不同，如下：

- 时长：在设置的时长内计时器状态发生变化，直到时长结束停止，自动循环类型不可设置
- 间隔：表示每间隔一次计时器状态发生一次变化，若计时器添加有交互，则每间隔一次也会执行一次交互，默认1秒，三种类型计时器均可设置间隔

### 计时器启动{#mode}

计时器支持**自动**、**手动**和按**条件**启动三种方式。在**计时器**>**启动**中设置：

- 自动：自动计时，无需手动触发
- 手动：手动触发计时，需与[按钮](../common/button.md)、[调用组件方法](../../design/action/invoke-component-method.md)等交互搭配使用，可查看[验证码倒计时](#countdown)
- 条件：根据启用条件中的[表达式](../../../../exp/README.md)来判断是否启用

## 应用场景{#application}

### 验证码倒计时{#countdown}

使用计时器可实现手机登录获取验证码时，倒计时60秒的效果。实现思路如下：

1. 计时器设置`倒计时`类型，时长为`60`秒，间隔`1`秒，启动方式为`手动`
2. 在`获取验证码`按钮上添加`调用组件方法`交互，选择组件设置为`计时器11`，方法设置`开始计时`

![循环切换多页面板](./images/timer4.gif)

示例地址：[应用场景-验证码倒计时](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E8%AE%A1%E6%97%B6%E5%99%A8)

### 循环切换多页面板{#cycle}

使用计时器可实现循环播放页面效果，循环效果需与[多页面板](../layout/panelbook.md)配合实现。实现思路如下：

1. 计时器设置`定时循环`类型，间隔为`3`秒，启动方式为`手动`，并设置[切换多页面板](../../design/action/switch-panelbook.md)交互
2. 在`开始`按钮上添加`调用组件方法`交互，选择组件设置为`计时器8`，方法设置`开始计时`

![循环切换多页面板](./images/timer3.gif)

示例地址：[应用场景-循环播放图片](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E8%AE%A1%E6%97%B6%E5%99%A8)