HarmonyOS 请问ArkTS如何实现倒计时功能？

想要实现点击“获取验证码”按钮以后倒计时60秒的功能，我知道大概的实现方法，但是核心倒计时代码不知道怎么写…请问ArkTS是否有类似timeInterval之类的API来实现，请告诉我具体实现方式。

HarmonyOS

FengTianYa

2024-08-08 18:34:02

浏览

回答 8

待解决

回答 8

按赞同

按时间

鱼弦CTO

在 HarmonyOS 的 ArkTS (Ark TypeScript) 中实现倒计时功能，你可以使用 setInterval 和 clearInterval 这些常见的 JavaScript 定时器函数。以下是如何实现点击“获取验证码”按钮后进行60秒倒计时的具体步骤。

### 步骤概述

创建一个按钮和一个显示剩余时间的文本。
在按钮点击事件中启动定时器，每秒更新一次倒计时。
倒计时结束时停止定时器并恢复按钮状态。

### 实现代码

以下是一个完整的示例代码，展示了如何用 ArkTS 实现这个功能。

#### 1. 创建基本的界面组件

首先，创建一个包含按钮和倒计时文本的 UI：

// countdown.ets
@Entry
@Component
struct CountdownTimer {
  @State remainingTime: number = 0; // 剩余倒计时时间（秒）
  @State isCountingDown: boolean = false; // 是否正在倒计时

  private timerId: number | undefined;

  build() {
    Column({
      alignItems: 'center',
      justification: 'center',
      space: 20
    }) {
      Text(this.isCountingDown ? `${this.remainingTime} 秒` : '获取验证码')
        .fontSize(20)
        .margin({ bottom: 10 })
      
      Button('获取验证码')
        .disabled(this.isCountingDown)
        .onClick(() => this.startCountdown())
    }
  }

  startCountdown() {
    this.remainingTime = 60;
    this.isCountingDown = true;

    this.timerId = setInterval(() => {
      this.remainingTime -= 1;
      if (this.remainingTime <= 0) {
        this.stopCountdown();
      }
    }, 1000);
  }

  stopCountdown() {
    if (this.timerId !== undefined) {
      clearInterval(this.timerId);
      this.timerId = undefined;
    }
    this.isCountingDown = false;
  }
}

### 说明

状态管理：我们使用 @State 装饰器来声明两个状态变量：

remainingTime：表示剩余的倒计时时间。
isCountingDown：表示当前是否处于倒计时状态，用于控制按钮的启用/禁用状态。

定时器控制：

startCountdown() 方法在按钮点击时调用，初始化remainingTime 为 60 秒，并启动定时器每秒减少remainingTime 的值。如果倒计时结束，则调用stopCountdown() 停止定时器。
stopCountdown() 方法清除定时器并重置相关状态。

### 总结

以上代码展示了如何在 ArkTS 中利用 setInterval 和 clearInterval 函数实现倒计时功能。通过状态管理和定时器控制，我们能够在用户点击按钮后启动60秒的倒计时，并在倒计时结束时恢复按钮的可用状态。你可以根据需要进一步扩展此功能，例如添加视觉反馈、错误处理等。

2024-09-24 17:24:49

zbw_apple

开发者ArkTS组件中的TextTimer组件提供了通过文本显示计时信息并控制其计时器状态的功能。

具体可参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-texttimer-0000001820880909

2024-08-08 21:02:14

一路向北545

@Entry
@Component
struct Index {
  private Max_Seconds = 60
  @State count: number = this.Max_Seconds
  build() {
    Column() {
      Button(this.count == this.Max_Seconds ? "获取验证码" : this.count + "s").onClick(() => {
        let intervalId = setInterval(() => {
          console.log("=======" + this.count)
          if (this.count <= 0) {
            this.count = this.Max_Seconds
            clearInterval(intervalId)
          }else{
            this.count--
          }

        }, 1000)
      }).enabled(this.count == this.Max_Seconds ? true : false)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}