遇到的问题和知识点:
1、找不到dayjs.duration()方法。原因是没有引入dayjs.extend(require('dayjs/plugin/duration'));若dayjs库中没有duration文件,重新执行npm install dayjs --save更新dayjs库;duration参考https://day.js.org/docs/en/plugin/duration,里面有dayjs的相关文档。
2、setInterval(功能语句或函数, 3000)定时器方法;与clearInterval(setInterval生成的定时器)停止定时器方法。
3、vue语法 `${ }` (模版字符串)
复制下面的vue代码放到工程里面打开即可看到效果。
<template>
<div class="CountDown">
{{ countObj.showTime }}
</div>
</template>
<script>
import dayjs from 'dayjs';
dayjs.extend(require('dayjs/plugin/duration'));
export default {
name: 'CountDown',
data() {
return {
countObj: {
endTime: dayjs().add(10, 'm').toISOString(),
showTime: "00:10:00",
},
payTimer: null,
}
},
mounted() {
this.payTimer = setInterval(() => {
this.countDown();
}, 1000);
},
methods: {
countDown() {
let duration = dayjs.duration(dayjs(this.countObj.endTime) - dayjs());
let hours = duration.hours();
let minutes = duration.minutes() % 60 < 10 ? '0' + (duration.minutes() % 60) : duration.minutes() % 60;
let seconds = duration.seconds() % 60 < 10 ? '0' + (duration.seconds() % 60) : duration.seconds() % 60;
if (hours <= 0 && minutes <= 0 && seconds <= 0) {
this.countObj.showTime = '倒计时结束';
clearInterval(this.payTimer);
} else {
this.countObj.showTime = `${hours}:${minutes}:${seconds}`;
}
}
}
}
</script>
网友评论