目录

案例介绍

倒计时是计时器应用的核心功能，需要精确的时间控制和状态管理。本篇文章将介绍如何实现倒计时功能，包括计时器的启动、停止和状态更新。

代码实现

计时器控制方法

// 开始计时器
private startTimer() {
  if (this.getTotalSeconds() <= 0) {
    return
  }
  
  this.isRunning = true
  this.remainingSeconds = this.getTotalSeconds()
  
  this.timerId = setInterval(() => {
    if (this.remainingSeconds > 0) {
      this.remainingSeconds--
    } else {
      this.stopTimer()
      // 这里可以添加计时结束的提示或声音
    }
  }, 1000)
}

// 停止计时器
private stopTimer() {
  if (this.timerId !== -1) {
    clearInterval(this.timerId)
    this.timerId = -1
  }
  this.isRunning = false
}

// 重置计时器
private resetTimer() {
  this.stopTimer()
  this.hours = 0
  this.minutes = 0
  this.seconds = 0
  this.remainingSeconds = 0
}

// 组件销毁时清理
aboutToDisappear() {
  this.stopTimer()
}

倒计时显示

// 倒计时显示
if (this.isRunning) {
  Text(this.formatTime(this.remainingSeconds))
    .fontSize(48)
    .fontWeight(FontWeight.Bold)
    .margin({ bottom: 40 })

  Button('停止')
    .width(120)
    .height(50)
    .fontSize(18)
    .backgroundColor('#FF3B30')
    .borderRadius(25)
    .onClick(() => this.stopTimer())
}

代码详解

计时器控制解析

1. 启动计时器：

   • 检查时间有效性
   • 设置运行状态
   • 初始化剩余时间
   • 创建定时器每秒更新

2. 停止计时器：

   • 清除定时器ID
   • 更新运行状态
   • 保留当前剩余时间

3. 重置功能：

   • 停止当前计时
   • 清空所有时间值
   • 重置剩余时间

界面更新解析

1. 倒计时显示：

   • 大字号显示剩余时间
   • 实时更新显示内容
   • 醒目的字体样式

2. 停止按钮：

   • 显眼的红色背景
   • 合适的尺寸和圆角
   • 点击即停止计时

总结

本篇文章展示了计时器倒计时功能的实现，包括：

1. 精确的计时器控制机制
2. 完善的状态管理系统
3. 清晰的倒计时显示界面

通过这些功能的实现，确保了计时器的准确性和可靠性。