【共创季稿事节】 倒计时器：时分秒选择器与定时器的协同工作

一、引言倒计时器Countdown Timer是最常见的计时工具之一广泛用于会议提醒、烹饪计时、考试倒计日等场景。与正向计时的秒表不同倒计时器需要先设定一个目标时长然后从该时长开始递减到零。二、双模式设计本倒计时器采用设置模式和运行模式的双模式设计if (!this.isSet) {// 设置模式选择时/分/秒} else {// 运行模式显示倒计时}2.1 设置模式用户通过三个按钮组时、分、秒设定目标时长。2.2 运行模式显示倒计时数字提供暂停/继续和重置操作。三、时分秒选择器3.1 选择器设计每个时间单位时/分/秒使用上下箭头按钮调整数值Builder pickerItem(label: string, value: number, max: number, onChange: (v: number) void) {Column() {Text(label).fontSize(12)Button(String(value)).fontSize(20)Row() {Button(‘▲’).onClick(() onChange(value 1 max ? 0 : value 1))Button(‘▼’).onClick(() onChange(value - 1 0 ? max : value - 1))}}}上箭头加 1下箭头减 1超出范围则循环如 59 秒加 1 变为 0。3.2 时间值选择的范围控制每个时间单位都有其合理的取值范围单位 取值范围 循环规则时 0-23 23→0, 0→23分 0-59 59→0, 0→59秒 0-59 59→0, 0→59这种循环行为模仿了真实计时器的调节方式用户无需反复点击来增大数值。3.3 启动计时Button(‘▶ 开始倒计时’).onClick(() {this.remaining this.hours * 3600 this.minutes * 60 this.seconds;if (this.remaining 0) {this.isSet true;this.isRunning true;this.timerId setInterval(() {if (this.remaining 0) this.remaining–;else { clearInterval(this.timerId); this.isRunning false; }}, 1000);}})四、倒计时状态管理4.1 暂停/继续if (this.isRunning) {clearInterval(this.timerId);this.isRunning false;} else {this.timerId setInterval(() {if (this.remaining 0) this.remaining–;else { clearInterval(this.timerId); this.isRunning false; }}, 1000);this.isRunning true;}4.2 时间到提示if (this.remaining 0) {Text(‘⏰ 时间到!’).fontSize(24).fontColor(‘#E74C3C’)}五、时间格式化formatCountdown(sec: number): string {let h Math.floor(sec / 3600);let m Math.floor((sec % 3600) / 60);let s sec % 60;return${h 10 ? 0 : }${h}:${m 10 ? 0 : }${m}:${s 10 ? 0 : }${s};}六、总结倒计时器的核心难点不在于功能逻辑本身而在于设置与运行两种 UI 模式的切换、定时器的生命周期管理以及用户交互的防误操作设计。时间类工具的开发还涉及一些微妙的用户体验问题比如后台运行、通知提醒等这些问题在需要高可靠性的生产级应用中需要认真对待。