效果展示
关键步骤
- 为什么要设计倒计时！
- 设计倒计时需要哪些内容？
- 在什么时候设置倒计时开始？
- 如何换算倒计时中的天、时、分、秒数据？
如何在 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 中呈现“天时分秒”的文本倒计时？
向页面中拖入“文字”组件，将文字组件的数据设置为倒计时时间换算的结果
