Vue.js如何实现倒计时？颜小白实测可用！

Vue.JS如何实现倒计时功能

1.首先一般来说前端小伙伴们会收到后端同学传过来的一个结束时间，大部分需要倒计时得情况都是在详情页，比如商品，活动等一些场景。
2.如果需要实现倒计时功能，首先我们需要知道如何计算剩余时间，首先我们会拿到后端传过来的endTime。一般使用时间戳去计算。时间戳分为10位，秒为单位，13位毫秒为单位。首先获取当前时间用当前时间-endTime。我们就拿到了剩余时间，有两种情况：(1)首先endTime减去当前时间如果小于0说明结束时间已经过去了,返回一个“已截至”(2)如果endTime大于0就可以进行倒计时操作了。

废话不多说了，上代码

		data: function() {
				return {
					endTime:1615601742731，//毫秒时间戳
					day:'0',//天
					hour:'00',//时
					min:'00',//分
					second:'00'//秒
				}
			},
			methods:{
				getdetails(){
				//获取详情
					vm.countTime()
				}
			// 倒计时
				countTime() {
				  // 获取当前时间
				  let date = new Date()
				  let now = date.getTime()
				  // 设置截止时间
				  let endDate = new Date(this.endTime*1000) // this.endTime需要倒计时的日期
				  let end = endDate.getTime()
				  // 时间差
				  let countdown_time= end - now
				  // 定义变量 d,h,m,s保存倒计时的时间
				  if (countdown_time>= 0) {
				    // 天
				    this.day = Math.floor(countdown_time/ 1000 / 60 / 60 / 24)
				    // 时
				    let h = Math.floor(countdown_time/ 1000 / 60 / 60 % 24)
				    this.hour = h < 10 ? '0' + h : h
				    // 分
				    let m = Math.floor(countdown_time / 1000 / 60 % 60)
				    this.min = m < 10 ? '0' + m : m
				    // 秒
				    let s = Math.floor(countdown_time/ 1000 % 60)
				    this.second = s < 10 ? '0' + s : s
				  } else {
				    this.day = 0
				    this.hour = '00'
				    this.min = '00'
				    this.second = '00'
				  }
				  // 等于0的时候不调用
				  if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
				    return
				  } else {
					 this.$forceUpdate()//更新DOM
				  // 递归每秒调用countTime方法，显示动态时间效果,
				    setTimeout(this.countTime, 1000)
				  }
				},　
			}

代码都是实测可用得。如果帮到你了希望点个赞~ 谢谢，主页中还有很多关于Vue等方法，都是自己用过实测得