整理文檔，搜刮出一個(gè)vue 計(jì)時(shí)器組件的代碼，稍微整理精簡(jiǎn)一下做下分享。

:sendSync="sendSync"

:autoStart="autoStart"

:defaultVal="defaultVal"

>{{countString}}

export default {

data() {

return {

isStart: false,

globalTimer: null,//獲取setInterval對(duì)象值

countString: '0秒', //用來顯示時(shí)間

day: 0,

hour: 0,

minute: 0,

second: 0,

millisecond: 0,

countVal: this.defaultVal, //獲取初始值

pauseTime: 0,

}

},

watch: {

'countString': {

deep: true,

handler: function(val, oldVal) {

var vm = this

if (vm.needSendSunc) {

vm.passToParent(val)

}

}

},

'needSendSunc': {

deep: true,

handler: function(val) {

var vm = this

if (val) {

vm.passToParent(vm.countString)

}

}

}

},

props: {

sendSync: {

type: Boolean,

default: false,

},

autoStart: {

type: Boolean,

default: false,

},

defaultVal: {

type: Number,

default: 0,

}

},

mounted() {

var vm = this

if (vm.autoStart) {

vm.startCountFn()

}

},

computed: {

needSendSunc: function() {

return this.sendSync

}

},

created: function() {

this.$on('startCount', function() {

this.startCountFn()

});

this.$on('stopCount', function() {

this.stopCountFn()

});

},

components: {},

methods: {

counterFn: function(counterTime) {

var vm = this

var nowDate = new Date().getTime()

if(vm.pauseTime == 0){

var num = nowDate - counterTime //計(jì)算時(shí)間毫秒差

}else{

vm.pauseTime = vm.pauseTime +10

var num = vm.pauseTime - counterTime //計(jì)算時(shí)間毫秒差

}

var leave1 = num % (24 * 3600 * 1000) //計(jì)算天數(shù)后剩余的毫秒數(shù)

var leave2 = leave1 % (3600 * 1000) //計(jì)算小時(shí)數(shù)后剩余的毫秒數(shù)

var leave3 = leave2 % (60 * 1000) //計(jì)算分鐘數(shù)后剩余的毫秒數(shù)

vm.day = Math.floor(num / (24 * 3600 * 1000)) //計(jì)算相差天數(shù)

vm.hour = Math.floor(leave1 / (3600 * 1000))//計(jì)算相差小時(shí)

vm.minute = Math.floor(leave2 / (60 * 1000))//計(jì)算相差分鐘

vm.second = Math.round(leave3 / 1000) //計(jì)算相差秒

if (vm.day > 0) {

vm.countString = `${vm.day}天 ${vm.hour}小時(shí) ${vm.minute}分 ${vm.second}秒`;

} else if (vm.hour > 0) {

vm.countString = `${vm.hour}小時(shí) ${vm.minute}分 ${vm.second}秒`;

} else if (vm.minute > 0) {

vm.countString = `${vm.minute}分 ${vm.second}秒`;

} else {

vm.countString = `${vm.second}秒`;

}

},

startCountFn: function() {

var vm = this

if (!vm.isStart) {

vm.countVal = vm.countVal ? vm.countVal : new Date().getTime()

var timer = setInterval(function() {

vm.counterFn(vm.countVal)

}, 10)

vm.globalTimer = timer

vm.isStart = true

}

},

stopCountFn: function() {

var vm = this

if (vm.isStart) {

window.clearInterval(vm.globalTimer)

vm.globalTimer = null;

vm.isStart = false

vm.pauseTime = new Date().getTime()

}

},

passToParent: function(data) {

var vm = this

this.$emit("getDataFromChild", data)

},

}

}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

本條技術(shù)文章來源于互聯(lián)網(wǎng)，如果無意侵犯您的權(quán)益請(qǐng)點(diǎn)擊此處反饋版權(quán)投訴

本文系統(tǒng)來源：php中文網(wǎng)

總結(jié)

以上是生活随笔為你收集整理的html计时器组件,vue 计时器组件的实现代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。