vue 计时器组件的实现代码

  • 更新时间:2022-06-27 09:05:02
  • 编辑:吕琇晶

整理文档,搜刮出一个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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

相关教程

  • vue-validator(vue验证器)实例用法

    本篇文章主要介绍了vue-validator(vue验证器),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2020-05-25

  • 详解vue配置文件实现代理v2版本的方法

    这篇文章主要介绍了vue配置文件实现代理v2版本的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    发布时间:2020-03-09

  • vue input实现点击按钮文字增删功能实例代码

    这篇文章主要介绍了vue input实现点击按钮文字增删功能,涉及基于vue.js的事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

    发布时间:2021-05-21

  • vue组件jsx语法的实例用法

    本篇文章主要介绍了vue组件jsx语法的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2019-10-03

  • 详解Vue实现美团app的影院推荐选座功能

    大家都经常使用美团app买电影票,很多朋友不知道她的功能是怎么实现的,作为我程序员一枚对它的算法很好奇,今天小编就把基于Vue实现美团app的影院推荐选座功能分享到脚本之家平台,感兴

    发布时间:2020-01-24

  • vue列表交错过渡实现实例

    这篇文章主要介绍了vue的列表交错过渡实现代码示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    发布时间:2020-04-13

  • Vue实现一个返回顶部backToTop组件实例讲解

    本篇文章主要介绍了Vue实现一个返回顶部backToTop组件,可以实现回到顶部效果,具有一定的参考价值,有兴趣的可以了解一下

    发布时间:2019-12-12

  • Vue用cmd创建项目具体步骤

    在本篇内容里小编给大家整理了关于Vue用cmd创建项目的方法讲解,有兴趣的朋友们跟着学习下。

    发布时间:2019-12-16

  • 详解vue项目接入微信JSSDK的坑

    详解vue项目接入微信JSSDK的坑

    给大家整理了关于vue的教程,这篇文章主要介绍了详解vue项目接入微信JSSDK的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    发布时间:2022-06-17

用户留言