vue 计时器组件的实现代码


Posted in Javascript onSeptember 14, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
详解tween.js的使用教程
Sep 14 #Javascript
JS库之wow.js使用方法
Sep 14 #Javascript
JavaScript正则表达式和级联效果
Sep 14 #Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 #Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 #Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 #Javascript
JS中跳出循环的示例代码
Sep 14 #Javascript
You might like
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
php实现对象克隆的方法
2015/06/20 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
Python随机生成带特殊字符的密码
2016/03/02 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
售后服务承诺书怎么写
2014/05/21 职场文书
水电维修专业推荐信
2014/09/06 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
教师病假条范文
2015/08/17 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python