需求：點擊開始計時計時，并且開始計時按鈕文本編程停止計時文本，點擊記錄事件可以記錄當前時間并顯示到下面的記錄時間列中。

一、頁面制作

首先創建一個相對應用項目，命名為計時器：

接著創建一個頁面，設置頁面的水平、垂直對齊為居中：

接著創建一個行，用于顯示記錄內容：

這個行設置寬度不占滿 100%，使其可以居中對齊，并且給予對應的背景色，設置內部元素為居中對齊，接著為了使內部元素可以舉例上下左右有一點舉例，可以再設置內邊距增加其邊緣厚度：

接著創建一個行，命名為倒計時，在里面用于顯示對應的文本，設置其文本底部對齊顯示：

接著咱們先將初始文本加入其中，并且設置好對應的大小：

這些文本寬度都是33%，這樣才能占滿一行：

接著添加兩個對應的按鈕，具體設置寬高不再贅述：

接著創建一個行，命名為記錄區域用于記錄記下的時間，設置寬度為 300px，還需要注意的是，為了使其可以滾動，咱們需要對應的為其設置可以y軸裁剪隱藏滾動即可：

接著咱們再到這個行下創建一個循環創建和一個文本：

因為記錄事件肯定是一個數組之類的容器，所以肯定需要使用循環創建進行創建。

二、事件編寫

2.1 點擊事件

現在開始制作點擊事件計時，咱們可以知道，計時的話肯定是需要一個觸發器，那么此時咱們添加一個觸發器：

點擊按鈕即可觸發：

接下來還需要更改當前的按鈕文本為停止計時，那么還需要添加動作：

那么此時又有一個文本，在什么時候顯示為開始計時呢？我們得創建一個變量用于標記是否計時，在此創建一個布爾變量，默認為否，沒有點擊，當點擊后設置為true表示開啟，那么開啟時就設置文本為停止計時，關閉時就設置文本為停止計時即可：

這個時候將觸發器一并做了設置，因為停止計時肯定計時停止，我們預覽查看，此時頁面將會點擊之后顯示停止計時，再點擊將會恢復顯示：

2.2 計時器滾動

我們知道如果使用 秒 分 時計時，那么影響 分 時 的都是秒，60秒1個分，60分一個時，所以咱們先做分的計數，首先創建一個數值變量，命名為秒，隨后給計時器設置時間間隔為 1s：

每次觸發時這個秒數就應該設置為加1：

當加到60s時，那么這個秒變量置零，隨后分加1，所以在這里我們還需要創建兩個變量，分和時：

此時我們還需要知道一個問題，那就是如何在小于 10 的時候使前面有一個0，咱們可以直接再創建3個字符串，字符秒、字符分、字符時，判斷其秒分時是否小于10，小于10則賦值這個字符串的值前加一個0即可，那么事件為：


最后顯示區域的內容綁定為字符串秒分時即可：

2.3 記錄時間

記錄時間很簡單，創建一個一維數組，直接點擊按鈕給這個以為數組加值：

隨后循環創建指定對應數組：

最后顯示值即可。