记录:vue实现倒计时功能

345 阅读2分钟

前言:

13位的时间戳,其精度是毫秒(ms); 10位的时间戳,其精度是秒(s);

13位数的时间戳转化为10位数的时间戳 ,除以1000;
10位数的时间戳转化为13位数的时间戳 ,乘以1000;
在javascript中, new Date().getTime() 得到的是13位的时间戳。

代码:

mounted() {
    this.countTime()//调用
},

data() {
    return {
        d:'',
        h: '',
        m: '',
        s: '',
        sum_h: ''
    }
}

天/时/分/秒

 countTime() {
				// 定义结束时间戳
				const end = Date.parse(new Date('2020-1-12 10:10:10'))
				// 定义当前时间戳
				const now = Date.parse(new Date())
				// 做判断当倒计时结束时都为0
				if (now >= end) {
					this.d = 0
					this.h = 0
					this.m = 0
					this.s = 0
					return
				}
				// 用结束时间减去当前时间获得倒计时时间戳
				const msec = end - now
				let d = parseInt(msec / 1000 / 60 / 60 / 24) //算出天数
				let h = parseInt(msec / 1000 / 60 / 60 % 24)//算出小时数
				let m = parseInt(msec / 1000 / 60 % 60)//算出分钟数
				let s = parseInt(msec / 1000 % 60)//算出秒数
				//给数据赋值
				this.d = d
				this.h = h > 9 ? h : '0' + h
				this.m = m > 9 ? m : '0' + m
				this.s = s > 9 ? s : '0' + s
				//定义this指向
				const that = this
				// 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
				setTimeout(function () {
					that.countTime()
				}, 1000)
			}

时/分/秒

countTime () {
				// 获取当前时间
				var date = new Date();
				var now = date.getTime();
				//设置截止时间
				var endDate = new Date("2020-1-22 23:23:23");
				var end = endDate.getTime();
				//时间差
				var leftTime = end - now;
				//定义变量 d,h,m,s保存倒计时的时间
				if (leftTime >= 0) {
					this.d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
					this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
					this.m = Math.floor(leftTime / 1000 / 60 % 60);
					this.s = Math.floor(leftTime / 1000 % 60);
					this.sum_h = this.d * 24 + this.h
				}
				// console.log(this.s);
				//递归每秒调用countTime方法,显示动态时间效果
				setTimeout(this.countTime, 1000);
			}