HarmonyOS 如何实现一个 60:00 这种倒计时字符的效果

需要一个倒计时的方法,展示出来的效果为120分钟倒计时120:00119:59119:58119:57左边是分钟,右边是秒,每隔一秒刷新一次字符串

HarmonyOS
2024-12-18 16:09:04
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

请参考以下代码实现倒计时效果:

@Entry
@Component
struct Arc {
  @State countdownValue: number = 60;

  aboutToAppear(): void {
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

      Text(this.countdownValue.toString())
        .backgroundColor(Color.Blue)
        .fontColor(Color.White)
        .width(100)
        .height(45)
        .textAlign(TextAlign.Center)
    }
    .width('100%')
    .height('100%')
  }

  onPageShow(): void {

    setInterval(() => {
      this.countdownValue--;
      if (this.countdownValue < 0) {
        clearInterval(this.countdownValue);
        return;
      }

    }, 1000);

  }
}
分享
微博
QQ
微信
回复
2024-12-18 17:55:12
相关问题
HarmonyOS TextTimer60倒计时显示成00
409浏览 • 1回复 待解决
HarmonyOS 60倒计时demo
489浏览 • 1回复 待解决
如何实现一个倒计时器?
862浏览 • 1回复 待解决
HarmonyOS 实现倒计时功能
485浏览 • 1回复 待解决
HarmonyOS 页面倒计时怎么实现
308浏览 • 1回复 待解决
HarmonyOS 倒计时天数
704浏览 • 1回复 待解决
如何实现文本类型倒计时
1232浏览 • 0回复 待解决
HarmonyOS 请问ArkTS如何实现倒计时功能?
33427浏览 • 8回复 待解决
HarmonyOS 如何自动倒计时组件
745浏览 • 1回复 待解决
HarmonyOS 倒计时方法
530浏览 • 1回复 待解决
HarmonyOS TextTimer倒计时问题
388浏览 • 1回复 待解决
HarmonyOS Timer倒计时自定义
871浏览 • 1回复 待解决
HarmonyOS 如何实现一个转圈效果
1329浏览 • 2回复 待解决