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

news2024/9/21 13:18:45

写在前面

这是PB案例学习笔记系列文章的第11篇，该系列文章适合具有一定PB基础的读者。

通过一个个由浅入深的编程实战案例学习，提高编程技巧，以保证小伙伴们能应付公司的各种开发需求。

文章中设计到的源码，小凡都上传到了gitee代码仓库https://gitee.com/xiezhr/pb-project-example.git

gitee代码仓库

需要源代码的小伙伴们可以自行下载查看，后续文章涉及到的案例代码也都会提交到这个仓库【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))