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

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

如题,需要一个倒计时的方法,展示出来的效果为 120分钟 倒计时

120:00
119:59
119:58
119:57

左边是分钟,右边是秒。

每隔一秒刷新一次字符串

2 回复
[@Entry](/user/Entry)
[@ComponentV2](/user/ComponentV2)
struct Index {
[@Local](/user/Local) text: string = '120:00'
startTime: number = 0
duration = 2 * 60

aboutToAppear(): void {

}

build() {
Column() {
Text(this.text)
.onClick(() => {
this.start()
})
}
.height('100%')
.width('100%')
}

start() {
this.startTime = Date.now()
this.cycle(1000)
}

cycle(time: number) {
setTimeout(() => {
let time = Date.now()
let duration = Math.floor((time - this.startTime) / 1000)
let last = this.duration - duration
let h = Math.floor(last / 60)
let hh: string = h.toString()
if (h < 10) {
hh = '0' + hh
}
let m = last % 60
let mm: string = m.toString()
if (m < 10) {
mm = '0' + mm
}
this.text = hh + ':' + mm
this.cycle(1000 - (time - this.startTime) % 1000)
}, time)
}
}

更多关于HarmonyOS 鸿蒙Next 如何实现一个 60:00 这种倒计时字符的效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中实现一个60:00格式的倒计时字符效果,你可以通过以下步骤进行:

  1. 初始化时间变量:首先,定义一个变量用于存储倒计时时间,初始值设为60秒(或60000毫秒)。

  2. 创建定时器:使用系统提供的定时器功能,设置每隔一定时间(如1000毫秒)更新一次倒计时显示。

  3. 格式化时间:在每次定时器触发时,将剩余时间转换为“MM:SS”格式。这通常涉及将总秒数除以60得到分钟数,取余数得到秒数,然后格式化为字符串。

  4. 更新UI:将格式化后的时间字符串更新到UI组件上,如TextView等。

  5. 处理倒计时结束:当时间减到0时,停止定时器并处理倒计时结束的逻辑。

  6. 资源释放:确保在倒计时结束或应用退出时,释放定时器资源以避免内存泄漏。

示例代码可能涉及UI框架和定时器API的具体使用,这里未给出详细代码。若你使用的是特定的UI框架(如ArkUI),请参考相关文档进行具体实现。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部