#夏日挑战赛# HarmonyOS - 自定义组件之计时器 原创 精华

getTime(time) {
       this.countNum = time;
       setTimeout(() => {
           this.getTime(time --)
       }, 1000)
},
1.
2.
3.
4.
5.
6.

setInterval(() => {
        this.countNum --
}, 1000)
1.
2.
3.

getTime(time) {
        this.countNum = time;
        setTimeout(() => {
            const nowDate = Date.now()
            const diff = Math.floor((nowDate - this.curTime) / 1000)
            const step = diff > 1 ? diff : 1 // 页面退到后台后计时有偏差，对比时间差，得到计时step
            this.curTime = nowDate
            this.getTime(time - step)
        }, 1000)
},
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

getTime(time) {
        this.timer && clearTimeout(this.timer) //清除定时器
        this.countNum = time;
        this.timer = setTimeout(() => {
            const nowDate = Date.now()
            const diff = Math.floor((nowDate - this.curTime) / 1000)
            const step = diff > 1 ? diff : 1 // 页面退到后台后计时有偏差，对比时间差，得到计时step
            this.curTime = nowDate
            this.getTime(time - step)
        }, 1000)
},
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

<div class="count-down">
    <image class="count" src="./count.png"></image>
    <div class="countNumCon">
        <text class="countNum">
            {{countNum}}
        </text>
    </div>
</div>
1.
2.
3.
4.
5.
6.
7.
8.

export default {
    props: [
        'time'
    ],
    data: {
        timer: null, //定时器
        curTime: 0, //记录上次操作时间
        countNum: '',
    },
    onInit() {
        this.countDown()
        this.$watch('time', 'countDown');
    },
    //将传入的时间（s）转换成天/小时/分钟/秒
    durationFormatter(time) {
        if (!time) return { ss: 0 }
        let t = time
        const ss = t % 60
        t = (t - ss) / 60
        if (t < 1) return { ss }
        const mm = t % 60
        t = (t - mm) / 60
        if (t < 1) return { mm, ss }
        const hh = t % 24
        t = (t - hh) / 24
        if (t < 1) return { hh, mm, ss }
        const dd = t
        return { dd, hh, mm, ss }
    },
    //处理时间格式
    dealTime(time){
        return `00${time || ''}`.slice(-2);
    },
    countDown() {
        this.curTime = Date.now()
        this.getTime(this.time)
    },
    //计算时间
    getTime(time) {
        this.timer && clearTimeout(this.timer)
        if (time < 0) {
            return
        }
        const { dd, hh, mm, ss } = this.durationFormatter(time)
        this.countNum = `${dd || 0}天 ${this.dealTime(hh)}:${this.dealTime(mm)}:${this.dealTime(ss)}`;
        this.timer = setTimeout(() => {
            const nowDate = Date.now()
            const diff = Math.floor((nowDate - this.curTime) / 1000)
            const step = diff > 1 ? diff : 1 // 页面退到后台的时候不会计时，对比时间差，大于1s的重置倒计时
            this.curTime = nowDate
            this.getTime(time - step)
        }, 1000)
    },
};
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.

.count-down {
    display: flex;
    margin-top: 200px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 50%;
}
.countImg {
    width: 200px;
    height: 100px;
}
.numContainer {
    background-color: black;
    height: 57px;
    width: 140px;
    left: 8px;
    top: -80px;
    justify-content: center;
    border-radius: 7px;
}
.count {
    color: white;
    font-size: 22px;
    font-weight: 500;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

<element name="countDown" src="../countDown/countDown.hml">
</element>
<div class="container">
    <countDown time="{{ leftTime }}">
    </countDown>
</div>
1.
2.
3.
4.
5.
6.

export default {
    data: {
        leftTime: 100,
    },
};
1.
2.
3.
4.
5.