vue 实现倒计时

完整代码：更正一下，这样每次调用函数很消耗性能，我亲眼看到页面在IOS中挂掉，这是一个不太好的示范，下面有更好的实现

curt(){   //显示倒计时
                const _this = this;   //保存this的值，下面会有需要
                const end = new Date(_this.end).getTime();  //end是请求回来的结束时间，也可以自己设置
                const now = Date.now();  //获取当前时间戳
                if(now >= end){
                    this.d = 0;
                    this.h = 0;
                    this.m = 0;
                    this.s = 0;
                    this.timer = null;  //记得当前时间大于结束时间时，清除定时器
                    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.timer = setInterval(function () {   //每隔一秒递归调用自己
					_this.curt()}
                ,1000)
            },

data中的数据：

data () {
	return {
		end:'',
        d:'',
        h:'',
        m:'',
        s:'',
        timer:null
	}
}

computed中，将数据整合起来

lastTime(){
                return this.d + '天' + this.h + '小时' + this.m + '分钟' + this.s + '秒'
            }

在watch中，当end被赋值后调用curt函数就好啦

watch:{
            end(newV){
                if(newV){
                    this.curt();
                }
            }
        },

更好的方法

curt() { //显示倒计时
                let end
                if (isAndroid) {  //安卓中
                    end = new Date(this.end).getTime();
                } else if (isiOS) {  //IOS中
                    end = new Date((this.end).replace(/-/g, '/')).getTime();
                }

                let now = new Date().getTime();
                if (now >= end) {
                    this.d = 0;
                    this.h = 0;
                    this.m = 0;
                    this.s = 0;
                    this.timer = null;
                    return;
                } else {
                    let msec = parseInt((end - now) / 1000)
                    this.timer = setInterval(() => {
                        msec -= 1;
                        let d = parseInt(msec / 60 / 60 / 24)
                        let h = parseInt(msec / 60 / 60 % 24)
                        let m = parseInt(msec / 60 % 60)
                        let s = parseInt(msec % 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
                    }, 1000)
                }
            },

watch: {  //同样的，当end被赋值时调用curt函数，
            endTime(newV) {
                if (newV) {
                    this.end = newV;
                    if (new Date(newV.replace(/-/g, '/')).getTime() - Date.now() > 0) {
                        this.curt();
                        this.isOver = false
                    } else {
                        this.isOver = true
                    }
                }
            }
        },

此外，还发现一个问题，IOS和安卓中转时间戳的格式不同，一般后端返回给我们的时间格式是： xxxx-xx-xx xx:xx:xx

我们使用new Date(xxxx-xx-xx xx:xx:xx).getTime()在安卓中是没有问题的，可以转为时间戳
但是在IOS中只有xxxx/xx/xx xx:xx:xx的格式才能转为时间戳，否则会显示NaN

因此在IOS中需要将时间进行处理，使用一个正则，将-替换为 / 就好了
在IOS中：

假设得到的时间赋值给time变量
new Date(time.replace(/-/g , '/')).getTime()
在IOS中就能达到我们需要的时间戳了