使用vue创建订单倒计时关闭显示效果

定义vue变量 

endTime：‘’  // 动态倒计时显示

orderInvalidationTime：‘’  //倒计时秒数

vue.$nextTick(function () {

       //加载后台配置的倒计时秒数

       setInterval(this.timer, 1000); //vue渲染完毕每秒调用timer函数

})   

timer: function () {
    var day = 0,
        hour = 0,
        minute = 0,
        second = 0;//时间默认值
    if (this.orderInvalidationTime > 0) {
        day = Math.floor(this.orderInvalidationTime / (60 * 60 * 24));
        hour = Math.floor(this.orderInvalidationTime / (60 * 60)) - (day * 24);
        minute = Math.floor(this.orderInvalidationTime / 60) - (day * 24 * 60) - (hour * 60);
        second = Math.floor(this.orderInvalidationTime) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
    }
    if (minute <= 9) minute = '0' + minute;
    if (second <= 9) second = '0' + second;
    this.endTime = "订单关闭：" + hour + ":" + minute + ":" + second;
    this.orderInvalidationTime--;
    if (this.endTime == "订单关闭：0:00:00") {
        //自定义做订单倒计时时间到了的操作
    }
}

效果函数做完了

开始计算需要倒计时的时间

算法为： 
this.orderInvalidationTime = 后台配置的倒计时秒数 -（系统服务器时间(S) - 订单创建时间(S));
注意： 1 获取服务时间方法 new Date($.ajax({type: 'HEAD', async: false}).getResponseHeader("Date"));
        不要new Date(); 浏览器时间可以被改动导致和服务器时间不一致；
      2 把所有时间参数转化毫秒数计算最后再转化秒；
      3 ios时间格式有点特殊需用replace(/-/g, '/')转化；
下面为案例代码：
var date1 = new Date(f_oi_order_time.replace(/-/g, '/'));
var date2 = new Date($.ajax({type: 'HEAD', async: false}).getResponseHeader("Date"));
var date3 = parseInt((date2.getTime() - date1.getTime()) / 1000);   //相差秒数
var date4 = parseInt(f_oi_invalidation_time);
_this.orderInvalidationTime = date4 - date3;

此计算也要放在setInterval(this.timer, 1000);执行之前。