【PB案例学习笔记】-13 徒手做个电子时钟

写在前面

这是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 then
  l_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 then
  l_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 (●’◡’●)