寫在前面
這是PB案例學習筆記系列文章的第11篇，該系列文章適合具有一定PB基礎的讀者。
通過一個個由淺入深的編程實戰案例學習，提高編程技巧，以保證小伙伴們能應付公司的各種開發需求。
文章中設計到的源碼，小凡都上傳到了gitee代碼倉庫https://gitee.com/xiezhr/pb-project-example.git
需要源代碼的小伙伴們可以自行下載查看，后續文章涉及到的案例代碼也都會提交到這個倉庫【pb-project-example】
如果對小伙伴有所幫助，希望能給一個小星星?支持一下小凡。
一、小目標
上一篇中我們使用Timer時間制作了一個秒表，之后就有小伙伴問了，秒表都做了，能不能做個電子時鐘呢？
當然可以了，這就安排上。這篇文章我們將使用到新的控件Oval來做一個鐘表框，
利用Now()、Hour()、Minute()、Second()等日期時間函數將系統時間顯示在文本框中；
利用Sin()、Cos()、Pi()等數學函數來來控制時針、分針、秒針實現下圖所示的電子時鐘；
利用Window的Timer時間讓時鐘走起來。最終實現下面的效果
二、時間日期函數
在之前的案例中我們并沒有接觸過日期時間函數，而這些函數在日常開發中也是使用比較頻繁的。
現在我們來具體說說這些函數都是怎么用的。
| 函數名稱 | 返回值 | 功能描述 |
|---|---|---|
Day | Integer | 返回日期的天數值 |
DayName | String | 返回日期的星期值 |
DayNumber | Integer | 返回日期為該周的第幾天 |
DaysAfter | Long | 返回兩個日期的間隔天數 |
Hour | Integer | 返回時間的小時值 |
Minute | Integer | 返回時間的分鐘值 |
Month | Integer | 返回日期的月份值 |
Now | Time | 返回系統的當前時間 |
RelativeDate | Date | 返回日期之后指定天數的日期 |
RelativeTime | Time | 返回指定時間前后指定秒數的時間 |
Second | Integer | 返回時間的秒數值 |
SecondAfter | LOng | 返回兩個時間的間隔秒數 |
Today | Date | 返回系統當前日期 |
Year | Integer | 返回日期的年份 |
三、Oval控件簡介
Oval控件是一種圖形控件，用于在窗口或用戶界面上繪制橢圓或圓形。
在這篇文章中我們就通過該控件繪制了一個表盤及各個時刻點
四、創建程序基本框架
① 建立examplework工作區
② 建立exampleapp應用
③ 新建w_main窗口，標題Title設置為電子時鐘
以上步驟如果忘記的小伙伴可以翻一翻該系列的第一篇文章
④ 新建控件
在w_main窗口中新建一個SingleLineEdit控件、13個Oval控件和4個StaticText控件和3個Line控件
SingleLineEdit控件用來顯示數字時間，一個Oval控件用來做鐘表盤，其他12個Oval控件指示小時位置，
4個StaticText分別顯示3、6、9、12 四個小時數值，3個Line控件分別作為時針、分針和秒針
⑤ 將上面畫好的窗口保存為w_main
五、編寫事件代碼
① 定義全局變量
定義三個全局變量，分別表示小時、分鐘、秒
long l_hour, l_Min,l_Sec
② 在w_main窗口的open事件中添加如下代碼
// 獲取當前時間的秒數，并賦值給變量l_sec
l_sec = Second(Now())// 獲取當前時間的分鐘數，并賦值給變量l_Min
l_Min = Minute(Now())// 獲取當前時間的小時數，并賦值給變量l_hour
l_hour = Hour(Now())// 如果小時數大于12，將小時數轉換為12小時制
if l_hour > 12 thenl_hour = l_hour - 12
end if// 設置線條ln_1的起始Y坐標為ov_1對象的Y坐標加上ov_1高度的一半
ln_1.BeginY = ov_1.y + ov_1.height / 2// 設置線條ln_1的起始X坐標為ov_1對象的X坐標加上ov_1寬度的一半
ln_1.BeginX = ov_1.x + ov_1.width / 2// 計算線條ln_1的結束Y坐標，基于當前秒數和角度45度，使用正弦函數
ln_1.EndY = ln_1.BeginY + 580 * Sin(Pi(l_sec + 45) / 30)// 計算線條ln_1的結束X坐標，基于當前秒數和角度45度，使用余弦函數
ln_1.EndX = ln_1.BeginX + 580 * Cos(Pi(l_sec + 45) / 30)// 設置線條ln_2的起始X和Y坐標與ln_1相同
ln_2.BeginX = ln_1.BeginX
ln_2.BeginY = ln_1.BeginY// 計算線條ln_2的結束X坐標，基于當前分鐘數和角度45度，使用正弦函數
ln_2.EndX = ln_2.BeginX + 550 * Sin(Pi(l_Min + 45) / 30)// 計算線條ln_2的結束Y坐標，基于當前分鐘數和角度45度，使用余弦函數
ln_2.EndY = ln_2.BeginY + 550 * Cos(Pi(l_Min + 45) / 30)// 設置線條ln_3的起始X和Y坐標與ln_1相同
ln_3.BeginX = ln_1.BeginX
ln_3.BeginY = ln_1.BeginY// 計算線條ln_3的結束X坐標，基于12小時制的小時數、分鐘數和角度，使用正弦函數
ln_3.EndX = ln_3.BeginX + 520 * Sin(Pi(((12 - l_hour) * 60 - l_Min - 360) / 360))// 計算線條ln_3的結束Y坐標，基于12小時制的小時數、分鐘數和角度，使用余弦函數
ln_3.EndY = ln_3.BeginY + 520 * Cos(Pi(((12 - l_hour) * 60 - l_Min - 360) / 360))// 調用定時器，通常會觸發周期性執行這段代碼
Timer(1)
③ 在w_main窗口的Timer事件中添加如下代碼
// 聲明一個time類型變量t_now，用于存儲當前時間
time t_now// 獲取當前系統時間，并賦值給t_now
t_now = Now()// 提取當前時間的小時數，并賦值給整型變量l_hour
l_hour = Hour(t_now)// 提取當前時間的分鐘數，并賦值給整型變量l_min
l_min = Minute(t_now)// 提取當前時間的秒數，并賦值給整型變量l_sec
l_sec = Second(t_now)// 如果小時數大于12，將小時數轉換為12小時制
if l_hour > 12 thenl_hour = l_hour - 12
end if// 將當前時間t_now轉換為字符串，并設置滑塊sle_1的文本
sle_1.text = String(t_now)// 更新線條ln_1的結束Y坐標，基于當前秒數和角度45度，使用正弦函數
ln_1.EndY = ln_1.BeginY + 580 * Sin(Pi((l_Sec + 45) / 30))// 更新線條ln_1的結束X坐標，基于當前秒數和角度45度，使用余弦函數
ln_1.EndX = ln_1.BeginX + 580 * Cos(Pi((l_Sec + 45) / 30))// 更新線條ln_2的結束Y坐標，基于當前分鐘數和角度45度，使用正弦函數
ln_2.EndY = ln_2.BeginY + 550 * Sin(Pi((l_Min + 45) / 30))// 更新線條ln_2的結束X坐標，基于當前分鐘數和角度45度，使用余弦函數
ln_2.EndX = ln_2.BeginX + 550 * Cos(Pi((l_Min + 45) / 30))// 更新線條ln_3的結束X坐標，基于12小時制的小時數、分鐘數和角度，使用正弦函數
ln_3.EndX = ln_3.BeginX + 520 * Sin(Pi(((12 - l_hour) * 60 - l_Min - 360) / 360))// 更新線條ln_3的結束Y坐標，基于12小時制的小時數、分鐘數和角度，使用余弦函數
ln_3.EndY = ln_3.BeginY + 520 * Cos(Pi(((12 - l_hour) * 60 - l_Min - 360) / 360))
③ 在開發界面左邊的System Tree窗口中雙擊exampleApp應用對象，并在其open事件中添加如下代碼
open(w_main)
六、運行程序
到此大功告成了，一個簡單的電子時鐘基本完成了，我們來看看能不能達到我們預期的效果
本期內容到這兒就結束了，希望對您有所幫助★,°:.☆(￣▽￣)/$:.°★ 。
我們下期再見 ヾ(?ω?`)o (●’?’●)
