vue中实现倒计时（一个定时器实现多个倒计时）

vue中实现倒计时（一个定时器实现多个倒计时）

1.定义计算两个时间差得方法（如果项目很多地方用到倒计时，建议将此方法封装为全局函数）

  /**
   * --公共方法名称：计算时间差
   * 参数：
   * ksTime:开始时间 :【yyyy-dd-mm hh:mm:ss】格式时间字符串
   * jsType:计算类型 ：true:当前时间-ksTime   false：ksTime-当前时间
   * 返回结果：
   * newTimes:{
   *  dd:时间差别的天数
   *  hh:时间差的小时数
   *  mm:时间差的分钟
   *  ss:时间差的秒数
   * }
   * 快速复制：
    let newTimes = this.timeDifference(ksTime,jsType);//获取时间差
   */
   timeDifference(ksTime, jsType) {
      let d1 = ksTime
      let dateBegin = new Date(d1.replace(/-/g, '/')) //将-转化为/，使用new Date
      let dateEnd = new Date() //获取当前时间
      let dateDiff //时间差的毫秒数
      if (jsType) {
        dateDiff = dateEnd.getTime() - dateBegin.getTime()
      } else {
        dateDiff = dateBegin.getTime() - dateEnd.getTime()
      }
      let dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)) //计算出相差天数
      let leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
      let hours = Math.floor(leave1 / (3600 * 1000)) //计算出小时数
      //计算相差分钟数
      let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
      let minutes = Math.floor(leave2 / (60 * 1000)) //计算相差分钟数
      //计算相差秒数
      let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
      let seconds = Math.round(leave3 / 1000)
      // console.log(" 相差 "+dayDiff+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒")
      let newTimes = {
        dd: dayDiff,
        hh: hours,
        mm: minutes,
        ss: seconds,
      }
      return newTimes
    },

只要稍作改动， ksTime 就可以直接传入13位时间戳进行计算时间差啦

timeDifference(ksTime, jsType) {
  // let d1 = ksTime
  // let dateBegin = new Date(d1.replace(/-/g, '/'));
  let dateEnd = new Date() //获取当前时间
  let dateDiff //时间差的毫秒数
  if (jsType) {
	dateDiff = dateEnd.getTime() - ksTime
  } else {
	dateDiff = ksTime - dateEnd.getTime()
  }
  let dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)) //计算出相差天数
  let leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
  let hours = Math.floor(leave1 / (3600 * 1000)) //计算出小时数
  //计算相差分钟数
  let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
  let minutes = Math.floor(leave2 / (60 * 1000)) //计算相差分钟数
  //计算相差秒数
  let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
  let seconds = Math.round(leave3 / 1000)
  console.log(" 相差 "+dayDiff+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒")
  // console.log(dateDiff+"时间差的毫秒数",dayDiff+"计算出相差天数",leave1+"计算天数后剩余的毫秒数",hours+"计算出小时数",minutes+"计算相差分钟数",seconds+"计算相差秒数");
  let newTimes = {
	dd: dayDiff,
	hh: hours,
	mm: minutes,
	ss: seconds,
  }
  return newTimes
}

2.利用一个定时器实现多个倒计时

<template>
	<p v-for="(items,item) in list" :key="item">
	{{items.spName}}
	剩余时长：{{items.xcsj.dd}}天{{items.xcsj.hh}}小时{{items.xcsj.mm}}分{{items.xcsj.ss}}秒
    </p>
</template>
<script>
	export default {
	  data() {
	    return{
	     //数据层
	     timer:null,//保存定时器，用于销毁
	     list:[
		     {
		     	spName:"商品1",//商品名称
		     	expireTime:1425687541234，//商品发布到期时间的时间戳
		     	xcsj:{//动态计算显示的倒计时对象
		     		dd:"-",//天
					hh:"-",//时
					mm:"-",//分
					ss:"-"//秒
		     	},{
		     	spName:"商品2",//商品名称
		     	expireTime:1425687541234，//商品发布到期时间的时间戳
		     	xcsj:{//动态计算显示的倒计时对象
		     		dd:"-",//天
					hh:"-",//时
					mm:"-",//分
					ss:"-"//秒
		     	}
		     }
	     ]
	    }
	  },
	  mounted() {
	  	//该组件渲染时，判断定时器是否已开启
	  	if(this.timer){
			clearInterval(this.timer);//销毁定时器 建议该在组件关闭时，再执行此方法来销毁定时器，否则定时器会一直跑下去，造成内存泄漏！！！！
		}
		this.playTimer();//启用定时器
	  },
	  methods:{
	  	//此处省略 timeDifference(ksTime, jsType){ 。。。}计算时间差的方法
		playTimer(){
			this.timer=setInterval(()=>{
				for(let i in this.list){
					console.log(this.timeDifference(this.list[i].expireTime,false))
					this.list[i].xcsj =this.timeDifference(this.list[i].expireTime,false)
				}
			},1000)
		},
	  }
	  
	}
</script>

//码字不易，如果博主这篇文章帮助到了您，麻烦点个赞！