HarmonyOS Button倒计时获取验证码的实现

参考代码：

@Entry
@Component
struct Page33 {
  // 验证码按钮显示信息状态
  @State captchaButtonText: string = '获取验证码';
  // 滑块验证显示/隐藏状态
  @State sliderVisibility: Visibility = Visibility.None;

  // 页面即将消失时的回调函数
  aboutToDisappear() {
    // 清除验证码倒计时定时器
    clearInterval(globalThis.captchaTimerId);
  }

  // 构建组件树
  build() {
    // 主要布局
    Column() {
      // 验证码按钮
      Button((this.captchaButtonText))
        .fontSize('32lpx')
        .fontColor('#FF1919')
        .width('50%')
        .onClick(() => {
          // 判断是否开始倒计时
          if (this.captchaButtonText === '获取验证码') {
            // 设置初始倒计时时间为60秒
            globalThis.remainingSeconds = 60;
            // 更新验证码按钮文本为剩余秒数
            this.captchaButtonText = globalThis.remainingSeconds + 's';

            // 清除已存在的定时器
            clearInterval(globalThis.captchaTimerId);

            // 创建新的倒计时定时器
            globalThis.captchaTimerId = setInterval(() => {
              console.log('==== 定时器执行：', this.captchaButtonText);
              // 减少一秒
              globalThis.remainingSeconds--;
              // 更新验证码按钮文本
              this.captchaButtonText = globalThis.remainingSeconds + 's';

              // 倒计时结束，恢复初始状态
              if (globalThis.remainingSeconds <= 0) {
                this.captchaButtonText = '获取验证码';
                // 清除定时器
                clearInterval(globalThis.captchaTimerId);
              }
            }, 1000);
          }
        });
    }
    .width('100%');
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.