SoFunction
Updated on 2025-04-05

Implementation code of vue timer component

Organize the document, search out the code of the vue timer component, and organize it a little and streamline it to share it.

<template>
 <div>
  <span 
    :sendSync="sendSync" 
    :autoStart="autoStart" 
    :defaultVal="defaultVal"
  >{{countString}}</span>
 </div>
</template>
<script>
export default {
 data() {
  return {
   isStart: false,
   globalTimer: null,//Get the setInterval object value   countString: '0 seconds', // Used to display time   day: 0,
   hour: 0,
   minute: 0,
   second: 0,
   millisecond: 0,
   countVal: , //Get the initial value   pauseTime: 0,
  }
 },
 watch: {
  'countString': {
   deep: true,
   handler: function(val, oldVal) {
    var vm = this
    if () {
     (val)
    }
   }
  },
  'needSendSunc': {
   deep: true,
   handler: function(val) {
    var vm = this
    if (val) {
     ()
    }
   }
  }
 },
 props: {
  sendSync: {
   type: Boolean,
   default: false,
  },
  autoStart: {
   type: Boolean,
   default: false,
  },
  defaultVal: {
   type: Number,
   default: 0,
  }
 },
 mounted() {
  var vm = this
  if () {
   ()
  }
 },
 computed: {
  needSendSunc: function() {
   return 
  }
 },
 created: function() {
  this.$on('startCount', function() {
   ()
  });
  this.$on('stopCount', function() {
   ()
  });
 },
 components: {},
 methods: {
  counterFn: function(counterTime) {
   var vm = this
   var nowDate = new Date().getTime()
   if( == 0){
    var num = nowDate - counterTime // Calculate the time millisecond difference   }else{
     =  +10
    var num =  - counterTime // Calculate the time millisecond difference   }
   var leave1 = num % (24 * 3600 * 1000)  //Calculate the remaining milliseconds after the number of days   var leave2 = leave1 % (3600 * 1000)    //The remaining milliseconds after the hours are calculated   var leave3 = leave2 % (60 * 1000)   //The remaining milliseconds after counting the number of minutes    = (num / (24 * 3600 * 1000)) //Calculate the number of days of difference    = (leave1 / (3600 * 1000))// Calculate the difference hour    = (leave2 / (60 * 1000))// Calculate the difference in minutes    = (leave3 / 1000) // Calculate the phase difference seconds   if ( > 0) {
     = `${}sky ${}Hour ${}point ${}Second`;
   } else if ( > 0) {
     = `${}Hour ${}point ${}Second`;
   } else if ( > 0) {
     = `${}point ${}Second`;
   } else {
     = `${}Second`;
   }
  },
  startCountFn: function() {
   var vm = this
   if (!) {
     =  ?  : new Date().getTime()
    var timer = setInterval(function() {
     ()
    }, 10)
     = timer
     = true
   }
  },
  stopCountFn: function() {
   var vm = this
   if () {
    ()
     = null;
     = false
     = new Date().getTime()
   }
  },
  passToParent: function(data) {
   var vm = this
   this.$emit("getDataFromChild", data)
  },
 }
}
</script>
<style>

</style>

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.