vue 倒计时 插件_vue倒计时组件

这个是在项目中经常用到的倒计时组件，希望能帮助到你，刷新、跳转不重复不影响

直接上代码：

{{h}}

:

{{m}}

:

{{s}}

export default {

name: 'Date',

data() {

return {

d: '',

h: '',

m: '',

s: '',

}

},

created() {

this.countTime()

},

methods: {

countTime: function() {

//获取当前时间

var date = new Date()

var now = date.getTime()

//设置截止时间

var endDate = new Date('2019-10-22 23:23:23')

var end = endDate.getTime()

//时间差

var leftTime = end - now

//定义变量 d,h,m,s保存倒计时的时间

if (leftTime >= 0) {

this.d = Math.floor(leftTime / 1000 / 60 / 60 / 24)//天数我没用到，暂且写上

this.h = Math.floor((leftTime / 1000 / 60 / 60) % 24)

this.m = Math.floor((leftTime / 1000 / 60) % 60)

this.s = Math.floor((leftTime / 1000) % 60)

}

console.log(this.s)

//递归每秒调用countTime方法，显示动态时间效果

setTimeout(this.countTime, 1000)

},

},

}