5.6 交互案例——简易时钟

5.6.1 案例要求

在页面上实现时钟功能，显示当前时：分：秒，并且每秒更新时间。

5.6.2 案例实现

该案例的实现步骤如下。

1.添加元件并进行布局

新建“交互案例：简易时钟”页面，并从“元件库”面板拖动几个元件到“页面设计”面板，包括：一个椭圆形元件（做时钟的表面）、1 个表示小时的文本框元件（名称为hourTextfield）、1 个表示分钟的文本框元件（名称为 minuteTextfield）、1 个表示秒的文本框元件（名称为 secondTextfield），并添加小时和分钟之间的“：”文本框文件，分钟和秒之间的“：”文本框元件，添加到页面后调整到合适位置。

2.添加“秒”元件的Case 1用例

选中名称为“secondTextfield”（秒）的文本框元件，接着，在“检视”面板的“属性”选项卡单击“文本改变时”事件，打开该事件的第一个用例Case 1，设置如图5-12所示。

在Case1用例中，添加了一个触发条件，秒的值不等于59时按顺序触发如下动作。

1）等待1000毫秒，即1秒。

2）将 secondTextfield 元件的文本值设置为当前值加 1，LVAR1 是用到的局部变量，获取的是secondTextfield元件的当前值，单击“fx”按钮设置，如图5-13所示。

在图5-13中可以看到，新增了一个局部变量LVAR1，赋值为This，即当前元件的文本值，另外将“[[LVAR1+1]]”赋值给 secondTextfield 文本框元件，简单来说，就是：secondTextfield文本值=secondTextfield当前文本值+1。

Case 1用例实现的是当秒数为0～58时，实现秒的自增1操作，而且，间隔时间是1秒。

3.添加“秒”元件的Case 2用例

用类似方法为“secondTextfield”的文本框元件添加Case 2用例，如图5-14所示。

Case 2用例的说明如下。

1）触发条件：秒的值等于 59，分钟等于 59，时钟等于 23，即这个半夜 0 点前的临界条件时。

2）第一个动作：等待1000毫秒，即1秒。

3）第二个动作：将时钟、分钟和秒钟文本框元件的文字都设置为00。

4.添加“秒”元件的Case 3用例

用类似方法为“secondTextfield”的文本框元件添加Case 3用例，如图5-15所示。

Case 3用例的说明如下。

1）触发条件：秒的值等于59，分钟等于59，时钟不等于23（因为该用例在Case 2之后，是if…else if…else if的关系，所以时钟等于23的会进入Case 2用例，不会执行Case 3用例。

2）第一个动作：等待1000毫秒，即1秒。

3）第二个动作：将时钟的hourTextfield文本框元件的文本值都设置为当前值加1，也和Case 1用例一样，用到了LVAR1局部变量，因局部变量只在这个动作内有效，所以和Case 1的LVAR1不会冲突。

5.添加“秒”元件的Case 4用例

用类似方法为“secondTextfield”的文本框元件添加Case 4用例，如图5-16所示。

Case 4用例的说明如下。

1）触发条件：秒的值等于59，分钟不等于59（因为该用例在Case 3之后，是if…else if…else if的关系，所以分钟等于59的会进入Case 3用例，不会执行Case 4），时钟不等于23（因为该用例在 Case 2 之后，是 if…else if…else if 的关系，所以时钟等于 23 的会进入Case 2用例，不会执行Case 4用例）。

2）第一个动作：等待1000毫秒，即1秒。

3）第二个动作：将秒钟的文本值设置 00，分钟的文本框元件 minuteTextfield 的文本值设置为当前值加1，也和Case 1用例一样，用到了局部变量LVAR1，因局部变量只在这个用例内有效，所以和Case 1的LVAR1不会冲突。

6.设置页面加载时事件

虽然我们通过设置 secondTextfield 文本框元件的文本改变时事件，可以将秒、分钟和时钟的每隔一秒自动自增，但是，现在存在的问题是，“文本改变时”事件没有条件触发，而且时、分和秒的文本框元件的初始值没有赋值，我们可以通过设置该案例页面的“页面加载时”事件来实现事件的触发和初始值赋值。

将鼠标指针移动到“交互案例：简易时钟”页面的空白区域，之后在“检视”面板的“属性”选项卡，双击“页面载入时”事件，设置完成后效果如图5-17所示。

在该事件中，用的是“设置文本”动作，设置“时”“分”和“秒”三个文本框元件的值，分别设置为“[[Now.getHours（）]]”（这里用的是日期函数，获取当前小时数）、“[[Now.getMinutes（）]]”（这里用的是日期函数，获取当前分钟数）和“[[Now.getSeconds（）]]”（这里用的是日期函数，获取当前秒数）。

5.6.3 案例演示效果

按照步骤全部设置完成后，可按〈F5〉快捷键进行预览，预览效果如图5-18所示。

刚打开时显示为当前时间，时、分、秒文本框元件会每秒更新，从而实现了一个简易时钟的效果。