04｜无代码开发 ｜ 如何使用Zion实现倒计时功能

大家应该对下面的一个时间倒计时的功能比较熟悉了吧，今天就来教教大家如何在Zion无代码平台中通过倒计时组件来完成下面同版【倒计时】功能。

使用 Zion 倒计时组件实现“文本类倒计时”的步骤

1. 为什么要设计倒计时！

2. 设计倒计时需要哪些内容？

3. 在什么时候设置倒计时开始？

4. 如何换算倒计时中的天、时、分、秒数据？

5. 如何在 Zion 中呈现“天时分秒”的文本倒计时？

为什么要设计倒计时？

• 著名的心理学家丹尼尔·卡尔曼说过：在可以统计的大多数情况下，人们对"损失"的价值估算要比"得到"高出两倍。

• 倒计时促进用户行为的心理学原理来自于稀缺性与渴望、亏损与逃避心，这两种都是负向行为动机，相比于正向行为动机，它们会让用户感到心里不适，人们会为了消除不适而采取行动，但是，这一动机对行为的激励效果更加有效。

• 倒计时组件在交互设计中常用于表达活动或活动重要道具、奖励等的开始/结束，通过限时营造稀缺性，让用户产生渴望以及机会渐逝的损失感，进而激励用户行为。

设计倒计时需要哪些内容？

• Zion 的倒计时组件：向小程序页面中拖入一个倒计时组件

• 倒计时开始时间：一般是获取当前时间，当然也可以定义一个具体的时间 获取当前时间：找到 Zion 逻辑数据中的“当前日期时间” 注意：当前时间中“day”默认为1，需要修改为0

• 获取当前时间：找到 Zion 逻辑数据中的“当前日期时间” 注意：当前时间中“day”默认为1，需要修改为0

• 注意：当前时间中“day”默认为1，需要修改为0

• 倒计时结束时间：一般会定义一个具体的时间 在 Zion 的数据模型中创建储存倒计时结束时间的数据表（别忘了预览小程序让数据模型生效） 添加end_time字段，其数据类型为“时间戳”，用于定义结束时间 添加type字段，用于区分这个倒计时的用途

• 在 Zion 的数据模型中创建储存倒计时结束时间的数据表（别忘了预览小程序让数据模型生效） 添加end_time字段，其数据类型为“时间戳”，用于定义结束时间 添加type字段，用于区分这个倒计时的用途

• 添加end_time字段，其数据类型为“时间戳”，用于定义结束时间

• 添加type字段，用于区分这个倒计时的用途

• 为页面绑定远程数据

• 倒计时时间 = 结束时间 - 开始时间 在 Zion 中结束时间以及开始时间的数据类型均为“时间戳”，它们相减之后能够的到一个毫秒数

• 在 Zion 中结束时间以及开始时间的数据类型均为“时间戳”，它们相减之后能够的到一个毫秒数

• 设置倒计时组件的数据：其中毫秒数即为倒计时时间，需要使用算式数据计算得出暂时无法在文档外展示此内容

在什么时候设置倒计时开始？

• 由于“结束时间”是从远程数据中读取出来的，所以可以在远程数据加载成功时，添加倒计时开始行为

• 预览小程序之后发现，倒计时组件显示的是秒数，而不是几天、几小时、几分钟和几秒钟

如何换算倒计时中的天、时、分、秒数据？

• Zion倒计时的时间是以毫秒为单位计算的，以下分别为1天、1小时、1分钟、1秒等于多少毫秒 1 天 = 86400000（八千六百四十万）毫秒 1小时 = 3600000（三百六十万）毫秒 1分钟 = 60000 毫秒 1秒钟 = 1000 毫秒

• 1 天 = 86400000（八千六百四十万）毫秒

• 1小时 = 3600000（三百六十万）毫秒

• 1分钟 = 60000 毫秒

• 1秒钟 = 1000 毫秒

• 如果倒计时时间为 967756341 毫秒，是几天几小时几分几秒？你会怎么计算？ 在计算前，先了解两个常用的算术运算符

• 在计算前，先了解两个常用的算术运算符

• 通过上边的两个运算符，可以通过下列的运算得到结果 天的计算：967756341 / 86400000 = 11.2 （只保留了一位小数） 小时的计算：(967756341 % 86400000) / 3600000 = 4.8 分钟的计算：(967756341 % 3600000) / 60000 = 49.2 秒的计算：(967756341 % 60000) / 1000 = 16.3

• 天的计算：967756341 / 86400000 = 11.2 （只保留了一位小数）

• 小时的计算：(967756341 % 86400000) / 3600000 = 4.8

• 分钟的计算：(967756341 % 3600000) / 60000 = 49.2

• 秒的计算：(967756341 % 60000) / 1000 = 16.3

• 对上述结果取整后，可得到倒计时为：11天4小时49分16秒

如何在 Zion 中呈现“天时分秒”的文本倒计时？

• 向页面中拖入“文字”组件，将文字组件的数据设置为倒计时时间换算的结果

总体来说还是比较简单的，毕竟一行代码也不用写，只需要稍微转变一下思路就可以了。