vue如何實(shí)現(xiàn)計(jì)時(shí)器組件

這篇文章將為大家詳細(xì)講解有關(guān)vue如何實(shí)現(xiàn)計(jì)時(shí)器組件，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

實(shí)例如下：

<template>
 <div>
  <span 
    :sendSync="sendSync" 
    :autoStart="autoStart" 
    :defaultVal="defaultVal"
  >{{countString}}</span>
 </div>
</template>
<script>
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)
  },
 }
}
</script>
<style>

</style>

關(guān)于“vue如何實(shí)現(xiàn)計(jì)時(shí)器組件”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。