请求代码案例：HarmonyOS鸿蒙Next中使用计时器API实现倒计时功能

请求代码案例：HarmonyOS鸿蒙Next中使用计时器API实现倒计时功能 如何在Harmony NEXT中实现一个简单的计时器功能，并显示倒计时？

请求代码案例：使用计时器API实现倒计时功能。

3 回复

使用TextTimer即可实现，TextTimer的API详情可参考，https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-texttimer-V5

示例demo如下：

class MyTextTimerModifier implements ContentModifier<TextTimerConfiguration> {
  constructor() {
  }
  applyContent() : WrappedBuilder<[TextTimerConfiguration]>
  {
    return wrapBuilder(buildTextTimer)
  }
}

@Builder function buildTextTimer(config: TextTimerConfiguration) {
  Column() {
    Stack({ alignContent: Alignment.Center }) {
      Circle({ width: 150, height: 150 }).fill(config.started ? (config.isCountDown ? 0xFF232323 : 0xFF717171) : 0xFF929292)
      Column(){
        Text(config.isCountDown ? "倒计时" : "正计时").fontColor(Color.White)
        Text(
          (config.isCountDown ? "剩余" : "已经过去了") + (config.isCountDown?
            (Math.max(config.count / 1000 - config.elapsedTime / 100,0)).toFixed(1) + "/" + (config.count / 1000).toFixed(0)
            :((config.elapsedTime / 100).toFixed(0))
          ) + "秒"
        ).fontColor(Color.White)
      }
    }
  }
}

@Entry
@Component
struct Index {
  @State count: number = 10000
  @State myTimerModifier: MyTextTimerModifier = new MyTextTimerModifier()
  countDownTextTimerController: TextTimerController = new TextTimerController()
  countUpTextTimerController: TextTimerController = new TextTimerController()

  build() {
    Row() {
      Column() {
        TextTimer({isCountDown: true, count: this.count, controller: this.countDownTextTimerController})
          .contentModifier(this.myTimerModifier)
          .onTimer((utc: number, elapsedTime: number) => {
            console.info('textTimer onTimer utc is：' + utc + ', elapsedTime: ' + elapsedTime)
          })
          .margin(10)
        TextTimer({isCountDown: false, controller: this.countUpTextTimerController})
          .contentModifier(this.myTimerModifier)
          .onTimer((utc: number, elapsedTime: number) => {
            console.info('textTimer onTimer utc is：' + utc + ', elapsedTime: ' + elapsedTime)
          })
        Row() {
          Button("start").onClick(() =>{
            this.countDownTextTimerController.start()
            this.countUpTextTimerController.start()
          }).margin(10)
          Button("pause").onClick(() =>{
            this.countDownTextTimerController.pause()
            this.countUpTextTimerController.pause()
          }).margin(10)
          Button("reset").onClick(() =>{
            this.countDownTextTimerController.reset()
            this.countUpTextTimerController.reset()
          }).margin(10)
        }.margin(20)
      }.width('100%')
    }.height('100%')
  }
}

更多关于请求代码案例：HarmonyOS鸿蒙Next中使用计时器API实现倒计时功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以使用@ohos.timer模块中的Timer类来实现倒计时功能。以下是一个简单的代码示例：

import timer from '@ohos.timer';

let count = 10; // 倒计时初始值
const interval = 1000; // 定时器间隔，单位毫秒

// 创建定时器
const timerId = timer.setInterval(() => {
  if (count > 0) {
    console.log(`倒计时: ${count}秒`);
    count--;
  } else {
    console.log('倒计时结束');
    timer.clearInterval(timerId); // 停止定时器
  }
}, interval);

这个示例中，timer.setInterval用于创建一个定时器，每隔1秒执行一次回调函数。在回调函数中，count值递减，直到为0时停止定时器。timer.clearInterval用于清除定时器，停止倒计时。

注意：代码中的console.log可以根据实际需求替换为UI更新或其他操作。

在HarmonyOS鸿蒙Next中，可以使用Timer类来实现倒计时功能。以下是一个简单的代码示例：

import ohos.app.Context;
import ohos.eventhandler.EventHandler;
import ohos.eventhandler.EventRunner;
import ohos.eventhandler.InnerEvent;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;

public class CountDownTimer {
    private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0x00201, "CountDownTimer");
    private final EventHandler handler;
    private int remainingTime;

    public CountDownTimer(Context context, int startTime) {
        EventRunner runner = EventRunner.create(true);
        handler = new EventHandler(runner) {
            @Override
            protected void processEvent(InnerEvent event) {
                if (remainingTime > 0) {
                    HiLog.info(LABEL, "剩余时间: %d 秒", remainingTime);
                    remainingTime--;
                    handler.sendEvent(InnerEvent.get(0, 0), 1000); // 每秒触发一次
                } else {
                    HiLog.info(LABEL, "倒计时结束");
                    runner.stop();
                }
            }
        };
        this.remainingTime = startTime;
    }

    public void start() {
        handler.sendEvent(InnerEvent.get(0, 0), 1000); // 启动倒计时
    }
}

使用示例：

CountDownTimer timer = new CountDownTimer(this, 10); // 倒计时10秒
timer.start();

该代码创建了一个CountDownTimer类，使用EventHandler每秒触发一次事件，直到倒计时结束。

回到顶部