最佳实践|文字倒计时

快速使用Zion的倒计时组件实现小程序“文字类倒计时”的功能

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

  • 为什么要设计倒计时!
  • 设计倒计时需要哪些内容?
  • 在什么时候设置倒计时开始?
  • 如何换算倒计时中的天、时、分、秒数据?
  • 如何在 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 中呈现“天时分秒”的文本倒计时?

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

展示“文字倒计时”

  • Tips:为了显示的更美观,可以在倒计时组件的数据中设置倒计时“不可见”
2022-06-15
2 0