中继器系列（四）：正反倒计时元件的实现

栏目: IT技术 · 发布时间: 4年前

内容简介：在日常的原型制作中，经常用到时间的倒计时、计时等等。有一次小伙伴说能不能用中继器进行制作，然后每次使用就简单的改下中继器复用。于是踩坑几天后出现了这篇文章。注：本套教程共四个元件（分秒正计时、分秒倒计时、时分秒正计时、时分秒倒计时）加一个彩蛋（获取本机时间，开始24小时倒计时）。

在日常的原型制作中，经常用到时间的倒计时、计时等等。有一次小伙伴说能不能用中继器进行制作，然后每次使用就简单的改下中继器复用。于是踩坑几天后出现了这篇文章。

中继器系列（四）：正反倒计时元件的实现

前期准备

注：本套教程共四个元件（分秒正计时、分秒倒计时、时分秒正计时、时分秒倒计时）加一个彩蛋（获取本机时间，开始24小时倒计时）。

以下以分秒计时为元件组成为例截图：

中继器系列（四）：正反倒计时元件的实现

中继器系列（四）：正反倒计时元件的实现

举例正计时（分、秒）与倒计时（时、分、秒）的制作方式（还有彩蛋的制作思路）。

只保留中继器数据一行。创建数据集合。

中继器系列（四）：正反倒计时元件的实现

方式一：文本（分）、文本（秒）、矩形（：）。【注：优势：底层的矩形有占位空间，并且方便更改背景颜色。案例采用本方式】

方式二：文本（分）、文本（秒）、文本（：）。

中继器系列（四）：正反倒计时元件的实现

作用：通过动态面板的循环进行时间计数的触发；

交互事件：状态改变时；

方式：创建两个动态面板状态（命名：一、二）。

中继器系列（四）：正反倒计时元件的实现

数据赋值逻辑：进行开始时间通过中继器的 每项加载时 赋值给展示的文本（分）和文本（秒）。

中继器系列（四）：正反倒计时元件的实现进行结束时间的赋值（结束状态在条件中，此处赋值为赋值给结束条件）。

中继器系列（四）：正反倒计时元件的实现 （5）进行动态面板的切换触发交互。

创建启动按钮。

给启动按钮配置鼠标单击事件。鼠标单击时进行动态面板的向后循环(Next)，设置循环间隔1000（1000的时间长度为1秒）同时设置首个状态延时。

中继器系列（四）：正反倒计时元件的实现

考虑边界值转换情况。当秒钟计时到59时，下一个展示为00。于是进行状态的交互时间中做状态的划分。

当每次动态面板状态变化时，给秒的文本值进行加一。

当秒文本值为59时，进行分的文本值加一同时，同时将秒的文本值重置为00。

注：%为除以某数后取余。

中继器系列（四）：正反倒计时元件的实现

为了符合时间的展示效果，当时间为个位数的时候进行前补充0的操作。

使用的函数：

①concat(‘string’)：将当前本对象与另一个字符串组合。参数：string为组合在后面的字符串。

② ：slice(start,end)：从当前本对象中截取从指定起始位置开始到终结位置之前的字符串。参数：start为被截取部分的起始位置，该数值可为负数；end为被截取部分的终结位置，该数值可为负数。该参数可省略，省略该参数则由起始位置截取本对象结尾。