整理文檔,搜刮出一個vue 計時器組件的代碼,稍微整理精簡一下做下分享。
<template> <div> <span :sendSync="sendSync" :autoStart="autoStart" :defaultVal="defaultVal" >{{countString}}</span> </div></template><script>export default { data() { return { isStart: false, globalTimer: null,//獲取setInterval對象值 countString: '0秒', //用來顯示時間 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 //計算時間毫秒差 }else{ vm.pauseTime = vm.pauseTime +10 var num = vm.pauseTime - counterTime //計算時間毫秒差 } var leave1 = num % (24 * 3600 * 1000) //計算天數后剩余的毫秒數 var leave2 = leave1 % (3600 * 1000) //計算小時數后剩余的毫秒數 var leave3 = leave2 % (60 * 1000) //計算分鐘數后剩余的毫秒數 vm.day = Math.floor(num / (24 * 3600 * 1000)) //計算相差天數 vm.hour = Math.floor(leave1 / (3600 * 1000))//計算相差小時 vm.minute = Math.floor(leave2 / (60 * 1000))//計算相差分鐘 vm.second = Math.round(leave3 / 1000) //計算相差秒 if (vm.day > 0) { vm.countString = `${vm.day}天 ${vm.hour}小時 ${vm.minute}分 ${vm.second}秒`; } else if (vm.hour > 0) { vm.countString = `${vm.hour}小時 ${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) }, }}</script><style></style>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答