uniapp 仿钉钉打卡 动态时间

如何实现图片中的动态时间？

首先我们需要在渲染视图区绑定数据

<view>{{ curTime }}</view>

created() {
    this.updateCurTime() // 页面创建时立即更新一次时间
    setInterval(this.updateCurTime, 1000) // 每秒更新一次时间
}

updateCurTime() {
    const now = new Date()
    this.curTime = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
}

padStart

padStart方法的主要用途是将字符串格式化为相同字符长度,方法用于在当前字符串的开始（左侧）填充，以达到指定的目标长度。如果目标长度小于当前字符串的长度，则字符串不会被补全，返回当前字符串本身。如果目标长度小于用来填充的字符串长度与原字符串的长度之和，则多余的补全字符串会被截掉

const str = '123';
console.log(str.padStart(6,'0')); // "000123"