# 倒计时

来源快照：`result_data_new_260518.json`

- 来源 ID：`1183913013699297357`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 基础组件 - 基础组件_其它
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

# 倒计时

一、

## 功能背景及价值用途

在低代码平台开发过程中，时间敏感性场景不断增多，无论是搭建电商平台的限时促销活动、教育培训的课程倒计时，还是项目管理中的任务截止提醒，都对倒计时功能有着迫切需求。然而，传统开发倒计时功能往往需要开发者编写大量复杂的代码，涉及时间计算、动态渲染、事件监听等多个环节，不仅开发周期长，且容易出现代码冗余、维护困难等问题。基于低代码平台环境下快速实现多样化的功能，通过可视化的操作界面和简单配置，快速集成倒计时功能到各类应用中。使用低代码平台的倒计时组件可以可以提升开发效率、灵活适配多场景、便于统一管理与维护。

二、

## 功能概述

倒计时组件提供了翻牌式、环形式、日历式、横条式、卡片式等系统样式提供用户选择。提供多种配置方式如指定具体时间、指定参数方式、计时类型等配置。用户可根据实际的业务场景配置合适的倒计时组件。

## 三、使用说明

### 1、功能入口

设计器右侧“基础组件/其它”分类下选中倒计时组件，在右侧配置面板操作相关配置。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329645006577718&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

### 2、基础配置

#### 2.1、计时类型配置

倒计时提供【天】、【天-时】、【天-时-分】、【天-时-分-秒】、【时】、【时-分】、【时-分-秒】、【分】、【分-秒】等多种计时效果

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329645093388347&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329649215455240&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329649385431052&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

#### 2.2、截止类型配置

倒计时组件在截止类型方面提供指定时间、获取参数、指定时长三种配置方式，使用指定时间后可以配置具体截止时间、使用获取参数后可以通过页面地址栏参数的方式拿到对应截止时间。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329649385431060&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329653585920004&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

 

截止参数配置

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329653588123659&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329653585920012&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

指定时长配置

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329657922830338&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 3、样式配置

#### 3.1、系统样式设置

倒计时组件提供多种系统样式能够直接使用

1、翻牌式

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329657978290181&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

2、环形式

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329657774866445&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

3、日历式

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329662108745747&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

4、横条式

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329662220001376&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

5、卡片式

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329662155817127&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

#### 3.2、自定义样式设置

组件样式支持修改倒计时组件的卡牌颜色、卡牌文字、标题文字、标签文字

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329666422693903&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329666462433289&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
