小時鐘
時鐘是日常生活的必需品,每台電腦和行動裝置也都有內建時鐘的功能,透過 Webduino Blockly 時間積木,搭配迴圈或流程,就能在網頁上做出小時鐘的效果,這個範例將會介紹「迴圈」和「流程」兩種不同的時鐘作法。
步驟 1、顯示目前時間
顯示目前時間的方法很簡單,只要用顯示文字的積木,顯示目前時間即可,時間格式選擇「時:分:秒」。
如果要更改預設格式,也可以把時、分、秒單獨顯示在組合,下面的例子分別用三個變數 h、m 和 s 代表時、分、秒。
再新增一個變數 time,使用建立字串的方式,把 h、m 和 s 與標點符號「:」組合,顯示後也會是一樣的結果。
要不斷更新時間的方法有兩種,可自行選擇要用哪種方式。
第一種方法是使用「迴圈 + 等待」,放入一個無窮迴圈,再把剛剛組合好的顯示時間積木放到迴圈內,並在最後放上「等待 1 秒」的積木,執行後就會每秒更新時間。
第二種方法是使用「流程 + 等待」,建立一個流程 show,將組合好的顯示時間積木放進流程內,並在後面放上「等待 1 秒」的積木,在等待積木後方再放入一次流程 show,如此一來當 show 執行之後,就會每隔一秒在執行一次 show,也會每秒更新時間。
步驟 3、個位數補零
只要完成步驟 2,就已經完成了時鐘的基本功能,但這邊仍有個小問題,就是如果時間有「個位數」,並不會「補零」( 例如 5 顯示為 05 ),補零的方式可以透過「邏輯」實現,當出現的數字小於 10 的時候,就使用字串組合將 0 組合到數字前面。
分別針對變數 h、m、s ,新增各自的判斷,完成後將這些邏輯積木,放到變數設定後方。
完成結果
執行程式之後,網頁就會出現一個小時鐘,持續不斷每秒更新時間。