写点什么

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

作者:flfljh
  • 2024-12-18
    湖南
  • 本文字数:1123 字

    阅读完需:约 4 分钟

鸿蒙 next 实现试卷计时器

1.实现计时器 ui

@Entry@Componentstruct 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@Componentstruct 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)

}

}

}

用户头像

flfljh

关注

还未添加个人签名 2024-10-29 加入

还未添加个人简介

评论

发布
暂无评论
鸿蒙+next+实现试卷计时器_flfljh_InfoQ写作社区