40.倒计时的实现

1.背景

在需要精确时间控制的业务场景中，表单页面的实时倒计时功能尤为重要。无论是线上考试的时间提醒，还是资格审核的提交限时，清晰可视的倒计时都能有效提升操作的规范性与紧迫感。以下将详细介绍实现方法，帮助您快速为各类时效性业务表单添加可靠的倒计时能力。

2.设计思路

在设计该功能之前，需要先了解云表的一个基本控件-定时器，定时器的参考文档：9.2.10 定时器

（1）设计思路流程概览

（2）使用功能

①填表公式-新建打开表单后

②填表公式-值变化

③填表公式-定时器

3.实现步骤

前提：本案例是倒计时1个小时的示范案例

（1）数据项的设置

用户可见数据项：【倒计时】、【开始】（按钮格式）

辅助数据项：【累减辅助】【剩余时间】【初始时间】

倒计时、开始为文本类型数据项，剩余时间、初始时间、累减辅助为日期和时间类型数据项

（2）填表公式的设计

①初始值赋值

给初始时间与剩余时间赋值初始值，使用时间戳函数，构建日期和时间数据。

注意：

a.倒计时只需要显示时间，不需要显示日期，但因后续使用的函数需要日期和时间格式的数据，所以需要先构建日期和时间类型的数据项，因此，年、月、日参数可以随便填写数值，只需要符合日期格式即可。

b.本案例实现倒计时一个小时的场景，则时间的时、分、秒参数应分别为01、00、00，在实际运用过程中，可以实现倒计时2小时、3小时等等，相应修改时间的参数即可

②定时器的设置

添加定时器，将时间间隔设置为1（每秒运行一次），取消勾选[表单打开后自动运行]

在定时器下添加赋值公式

先选择数据源为本表单，

再对【累减辅助】数据项进行赋值，使用日期时间加减函数，参数分别为："ss" , "-1" , "数据源.剩余时间"

最后对【剩余时间】赋值为累减辅助

③单元格按钮的设计

用户点击【开始】按钮时，则开启定时器，使用“设置控件属性”将定时器的“运行”属性设置为“常量.是”

④值变化的设计

当【剩余时间】发生变化时，对【倒计时】进行赋值，使用“取右子串”函数，获取【剩余时间】后八位的字符串进行显示

当倒计时结束，则需要关闭定时器，则在赋值倒计时后加一个关闭倒计时的公式，使用“设置控件属性”这个填表公式

4.实现效果

完成设计后，即可实现倒计时的效果

5.扩展说明

（1）在设置倒计时的基础上，可以增加暂停、结束等按钮，点击暂停则暂停当前倒计时，点击结束则结束当前倒计时并重置时间

（2）累减辅助、剩余时间与初始时间均为辅助字段，在运行期可隐藏这三个字段

（3）可在此基础上，增加提示框，倒计时结束，则弹出倒计时已结束提示框