swift实现一个计时器的UI 计时器verilog_控件

Win Form编程简单倒计时器开发



#程序员干货站#倒计时应用功能是我们日常工作中常用的需求之一,比如在演讲比赛每位演讲者只允许演讲8分钟,最后一分钟会给出提示。各类考试面试计时也往往需要进行倒计时,并对结束时间进行提示等。结合教学需求,确定设计开发基于Timer的简单倒计时器。本文主要对倒计时器实现的基本思路、资源、设计及实现核心代码等进行说明,最终给出实现效果展示。


基本设计思路

所谓倒计时器即设置好计时时间,依靠C#提供的计时器函数,周期显示计时数字,直到最终显示为零,结束计时。设计图如下所示:




swift实现一个计时器的UI 计时器verilog_显示图片_02

计时器样式



其中所显示的数字可使用图片,借助Win Form提供的pictureBox控件,显示图片资源。在计时器周期函数中改变每一个pictureBox控件中的图片。本例设计计时器样式如上图,因此所需pictureBox控件数量为8。其中6个分三组用于显示计时数子,中间两个用于显示分隔符号:。计时器需要全屏显示,数字图片需要根据设备尺寸自动调整位置与大小。

在开始计时前允许用户设置计时的时长及是否给出声音提示等。本例设置计时时长分别为10,8,5,3,1。并支持在最后十秒给出声音提示。设置窗口设计如下图所示:




swift实现一个计时器的UI 计时器verilog_swift实现一个计时器的UI_03

基本参数设置页面



本例由于倒计时直到结束,对秒一下数字精度要求不高,因此设计给出4个计时器,其中一个用于实现分割符号的闪烁、一个用于分钟时间的改变、一个用于秒数的改变、一个用于最右侧一组数字的变化。

所需资源素材

本例设计思路描述上所述,需要准备素材包括图片资源与WAV格式提示音等相关素材。主要素材如下图所示:




swift实现一个计时器的UI 计时器verilog_verilog60秒倒计时代码_04

计时数字素材示例




swift实现一个计时器的UI 计时器verilog_显示图片_05

音频、间隔符及图片PS源图



核心实现说明

在完成基本思路、解决措施及资源准备之后,即可使用Visual Studio进行编程实现。本例选择Visual Studio版本为2019版本。编程环境截图如下:




swift实现一个计时器的UI 计时器verilog_显示图片_06

开发环境



以下对页面开发、功能实现等部分核心编程实现进行分析与说明:

1、计时全屏最大及位置确定

本例题设计进入计时页面后,页面全屏显示,隐藏标题栏部分,并且自动计算屏幕尺寸,生成picturebox控件的尺寸,确定各picturebox控件的显示位置。设计全屏幕共10个picturebox的宽度,两侧各空余1个picturebox宽度位置,因此,picturebox宽度即为屏幕宽度的1/10。素材给出图片宽高比为1:2。可以计算出高度,再根据控件高度与屏幕高度确定居中显示位置。主要实现代码如下所示:




swift实现一个计时器的UI 计时器verilog_verilog60秒倒计时代码_07

控件尺寸及位置坐标计算



2、加载图片与声音资源

本例开发的是桌面应用小程序,为方便使用各类资源无需外部调用,因此直接导入到项目资源中,发布程序之后可直接使用。其中图片资源缩略如下图:




swift实现一个计时器的UI 计时器verilog_控件_08

项目资源加载



资源加载完成之后可直接编程调用使用资源,各类资源使用代码描述如下:




swift实现一个计时器的UI 计时器verilog_控件_09

使用Resource中的图片资源




swift实现一个计时器的UI 计时器verilog_显示图片_10

加载WAV资源



3、设置计时图片显示

在Timer计时处理方法中,需要对三组数字(分钟、秒、毫秒)部分进行显示图片的切换。其中右侧两组相对复杂,以秒为例进行说明。由于秒的进位是60,因此在修改图片时需要从秒中分别读取出十位与个位数字,并进行判断,选择所需显示的图片。如秒位值为36,需要分别取出3与6进行判断,然后选择图片资源。该部分实现代码如下:




swift实现一个计时器的UI 计时器verilog_显示图片_11

设置显示图片



4、计时器编写

本例计时器主要包括间隔符闪烁计时,三组数字的计时,因此需要4个计时器,其中分钟的计时周期为60000微秒、秒计时周期为1000微秒,秒以下部分计时周期为10微秒。计时器编写部分代码如下所示:




swift实现一个计时器的UI 计时器verilog_swift实现一个计时器的UI_12

计时器初始化



三个数字改变计时器分别绑定了处理的方法,tmA、tmB、tmC三个函数,用于周期处理倒计时业务。其中tmB处理秒部分,每一个1000微秒,其值以60为周期减一,实现代码截图如下:




swift实现一个计时器的UI 计时器verilog_swift实现一个计时器的UI_13

秒处理部分代码



实现效果展示

以上给出了部分实现的代码,本例由于计时精度只需要保证秒即可,因此使用了三个计时器实现分别计算。在各计时周期内分别读分钟、秒等进行显示图片的改变,最终实现倒计时效果。最终开发程序运行效果如下:




swift实现一个计时器的UI 计时器verilog_控件_14

程序测试截图