鸿蒙+next+实现试卷计时器

鸿蒙next 实现试卷计时器

1.实现计时器 ui

@Entry
@Component
struct QuickTestMainPage {
  @State paperAllTime: number = 0; // 做试卷模式下的总时长
  @State remainTimeUi: string = "00:00";
  @State remainTime: number = 0; // ui显示的时长,做试卷为倒计时,普通做题为正记时
  
  
  build() {
     Column() {
            CustomIcon({
              iconType: CustomIconType.icon_timer,
              iconSize: 19,
              iconColor: StyleRes.getStyleColor(StyleColor.textBoldColor, this.lightMode)
            })
            Text(this.remainTimeUi)
              .fontColor(StyleRes.getStyleColor(StyleColor.texSubColor, this.lightMode))
              .fontSize(11)
          }
  }

}

2.利用setTimeout 来实现没一秒执行一次。

@Entry
@Component
struct QuickTestMainPage {
  @State paperAllTime: number = 0; // 做试卷模式下的总时长
  @State remainTimeUi: string = "00:00";
  @State remainTime: number = 0; // ui显示的时长,做试卷为倒计时,普通做题为正记时
  
  aboutToAppear(): void { 
  
    this.timerInit()
  }
  
  
  timerInit() {
    if (this.isTest) {
      this.remainTime = this.paperAllTime - this.makeTime;
    } else {
      this.remainTime = this.makeTime;
    }
    this.remainTimeUi = Utils.formatSeconds(this.remainTime);

    this.secondReturn();
  }

  secondReturn() {
    this.doExamTimer = setTimeout(() => {
      if (this.isTest) {
        // 做试卷

        this.remainTime--;
        this.remainTimeUi = Utils.formatSeconds(this.remainTime);
        this.makeTime = this.paperAllTime - this.remainTime;

        if (this.remainTime <= 0) {
          return;
        }
      } else {
        this.remainTime++;
        this.remainTimeUi = Utils.formatSeconds(this.remainTime);
        this.makeTime = this.remainTime;
      }

      // LogUtil.info(`doExamTimer: ${this.remainTime}`)

      this.secondReturn();

    }, 1000)

  }
  
  
  build() {
     Column() {
            CustomIcon({
              iconType: CustomIconType.icon_timer,
              iconSize: 19,
              iconColor: StyleRes.getStyleColor(StyleColor.textBoldColor, this.lightMode)
            })
            Text(this.remainTimeUi)
              .fontColor(StyleRes.getStyleColor(StyleColor.texSubColor, this.lightMode))
              .fontSize(11)
          }
  }

}
posted @   flfljh2024  阅读(24)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示