HarmonyOS 鸿蒙Next中使用 Date 实现高精度毫秒级秒表

实现效果

使用场景

跑步、游泳计圈、定时闹钟等

实现思路

第一步：创建一个HighPrecisionStopwatch管理方法类，维护一个 elapsedTime，定时器每次触发时，elapsedTime += 10。

第二步：通过lapTimes一个数组来 管理日期记录以此来实现圈数数据的记录。

完整实现代码

import { hilog } from '@kit.PerformanceAnalysisKit';

export class HighPrecisionStopwatch {
  private startTime: number = 0;
  private elapsedTime: number = 0;
  private isRunning: boolean = false;
  private lapTimes: number[] = [];

  // 开始计时
  start(): void {
    if (!this.isRunning) {
      this.startTime = Date.now() - this.elapsedTime;
      this.isRunning = true;
      hilog.info(0x0000, 'Stopwatch', '秒表开始计时');
    }
  }

  // 暂停计时
  pause(): void {
    if (this.isRunning) {
      this.elapsedTime = Date.now() - this.startTime;
      this.isRunning = false;
      hilog.info(0x0000, 'Stopwatch', `秒表暂停，当前时间: ${this.getFormattedTime()}`);
    }
  }

  // 记录单圈时间
  lap(): string {
    if (this.isRunning) {
      const currentTime = Date.now();
      const lapTime = currentTime - this.startTime;
      this.lapTimes.push(lapTime);

      const formattedLap = this.formatMilliseconds(lapTime);
      hilog.info(0x0000, 'Stopwatch', `单圈时间: ${formattedLap}`);
      return formattedLap;
    }
    return '00:00:00.000';
  }

  // 重置秒表
  reset(): void {
    this.startTime = 0;
    this.elapsedTime = 0;
    this.isRunning = false;
    this.lapTimes = [];
    hilog.info(0x0000, 'Stopwatch', '秒表已重置');
  }

  // 获取当前时间（毫秒）
  getCurrentTime(): number {
    if (this.isRunning) {
      return Date.now() - this.startTime;
    }
    return this.elapsedTime;
  }

  // 格式化时间显示
  getFormattedTime(): string {
    const time = this.getCurrentTime();
    return this.formatMilliseconds(time);
  }

  // 毫秒格式化
  private formatMilliseconds(ms: number): string {
    const hours = Math.floor(ms / 3600000);
    const minutes = Math.floor((ms % 3600000) / 60000);
    const seconds = Math.floor((ms % 60000) / 1000);
    const milliseconds = Math.floor(ms % 1000);

    return `${hours.toString().padStart(2, '0')}:${
    minutes.toString().padStart(2, '0')}:${
    seconds.toString().padStart(2, '0')}.${
    milliseconds.toString().padStart(3, '0')}`;
  }

  // 获取所有单圈时间
  getAllLaps(): string[] {
    return this.lapTimes.map((lap, index) =>
    `单圈 ${index + 1}: ${this.formatMilliseconds(lap)}`
    );
  }
}

import { HighPrecisionStopwatch } from './HighPrecisionStopwatch';

@Entry
@Component
struct StopwatchPage {
  private stopwatch: HighPrecisionStopwatch = new HighPrecisionStopwatch();
  @State currentTime: string = '00:00:00.000';
  @State laps: string[] = [];
  private timerId: number = 0;

  aboutToAppear(): void {
    this.startTimer();
  }

  aboutToDisappear(): void {
    this.stopTimer();
  }

  // 定时更新UI
  startTimer(): void {
    this.timerId = setInterval(() => {
      if (this.stopwatch) {
        this.currentTime = this.stopwatch.getFormattedTime();
      }
    }, 10);
  }

  stopTimer(): void {
    if (this.timerId) {
      clearInterval(this.timerId);
    }
  }

  build() {
    Column({ space: 0 }) {
      // 时间显示
      Text(this.currentTime)
        .fontSize(48)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Black)
        .margin({ top: 50 })

      // 控制按钮
      Row({ space: 10 }) {
        Button('开始')
          .backgroundColor('#007DFF')
          .onClick(() => {
            this.stopwatch.start();
          })
          .width(70)
          .height(40)

        Button('暂停')
          .backgroundColor('#FF7500')
          .onClick(() => {
            this.stopwatch.pause();
          })
          .width(70)
          .height(40)

        Button('单圈')
          .backgroundColor('#34C759')
          .onClick(() => {
            this.stopwatch.lap()
            this.laps = this.stopwatch.getAllLaps();
          })
          .width(70)
          .height(40)

        Button('重置')
          .backgroundColor('#FF3B30')
          .onClick(() => {
            this.stopwatch.reset();
            this.laps = [];
            this.currentTime = '00:00:00.000';
          })
          .width(70)
          .height(40)
      }
      .margin({ top: 40 })

      // 单圈时间列表
      List() {
        ForEach(this.laps, (item: string) => {
          ListItem() {
            Text(item)
              .fontColor(Color.Red)
              .fontSize(16)
              .padding(10)
          }
        })
      }
      .layoutWeight(1)
      .width('100%')
      .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}