moment.js 制作一个倒计时

后端返回一个活动到期时间戳(s)，前端需要根据这个时间做个倒计时，倒计时的精度为：xx天xx小时xx分钟xx秒

一个常见的活动倒计时。

注意：秒要转为ms毫秒，moment计算是以毫秒为单位的。

那么moment.js怎么计算出这些值呢？

纯文本显示倒计时

这个就要看你的样式了，如果你的要求只是显示纯文字：xx天xx小时xx分钟xx秒那么可以直接使用format方法。

<script>
import moment from "moment";
moment.locale("zh-cn"); //汉化
export default {
  data(){
    return {
      endTime:1614217890000, //ms 到期时间
      time:"",//倒计时内容
    }
  },
  methods(){
    countdown(){
      const diffTime = this.endTime - moment();
      return moment(diffTime).format("DD天HH小时mm分钟");
    }
  }
}
</script>

countdown方法计算到期时间与现在时间的时间差，然后通过format转换格式，转换为纯文本。

配合定时器这样写：

<template>
  <div>{{time}}</div>
</template>
<script>
import moment from "moment";
moment.locale("zh-cn"); //汉化
export default {
  data(){
    return {
      endTime:1614217890000, //ms 到期时间
      time:"",//倒计时内容
    }
  },
  methods(){
    countdown(){
      return moment(this.endTime - Date.now()).format("DD天HH小时mm分钟");
    },
    initCountdown(){
       if(this.$countdown) clearInterval(this.$countdown);
       if(this.endTime - Date.now() > 0) {
         this.time = this.countdown(); //首次
         //定时器
         this.$countdown = setInterval(()=>{
            if(this.endTime - Date.now() <= 0) {
              clearInterval(this.$countdown);
              this.time = "";
            }else {
              this.time = this.countdown();
            }
         },1000);
       }
    }
  },
  created() {
    this.initCountdown();
  },
  beforeDestroy() {
    if(this.$countdown) clearInterval(this.$countdown);
  },
}
</script>

单独获取每项时间数据

纯文本显示完毕后我们来考虑下另一种情况，就是需要分别拿到天、小时、分钟、秒；因为需要复杂的样式。

那么如何获取这些数据呢？

moment推荐，如果想要获取相差的天数，建议使用diff方法：

moment(this.endTime).diff(moment(), "days");

使用这个方式可以得到，天数，但是不能用于获取小时分钟秒，应为他计算的是总值，也就是总的相差多少天，多少小时，如果相差3天，得到的小时就是3*24了，而我们倒计时需要的是，抛去完整的天数，还剩下多少小时，多少分钟，多少秒。

这个方式我们需要通过duration方法获取：

const diffTime = moment(this.endTime).diff(moment());

const hours = moment.duration(diffTime).hours();  //小时
const minutes = moment.duration(diffTime).minutes();  //分钟
const seconds = moment.duration(diffTime).seconds();  //秒

通过这种方式拿到正确的时间，但是duration和diff方法得到的都是数字，也就是如果是一位数的数字，他的前面不是补0，但是一般我们的要求是，如果只有一位，是需要前面补0显示两位的。

所以我们需要一个补零的方法（es7）：

function prefixInteger(num, length) {
    return String(num).padStart(length, "0");
  },

传入要补零的数字，以及要补零的位数。

除了这个方法还有百度到的补零的通用方法（没有测试 233）：

//方法1
function PrefixInteger(num, length) {
  return (num/Math.pow(10,length)).toFixed(length).substr(2);
}

//更高效的方法2
function PrefixInteger(num, length) {
 return ( "0000000000000000" + num ).substr( -length );
}

//（最高效）
function prefixInteger(num, length) {
  return (Array(length).join("0") + num).slice(-length);
},

于是定时器这样写：

<template>
  <div>{{time.days}}天{{time.hours}}小时{{time.minutes}}分钟{{time.seconds}}秒</div>
</template>
<script>
import moment from "moment";
moment.locale("zh-cn"); //汉化
export default {
  data(){
    return {
      endTime:1614217890000, //ms 到期时间
      //倒计时内容
      time:{
        days:"",
        hours:"",
        minutes:"",
        seconds:""
      },
    }
  },
  methods(){
    //计算倒计时
    countdown(){
      Object.keys(this.time).forEach((key) => {
        if (key === "days") {
          const days = moment(this.endTime).diff(moment(), "days");
          this.time[key] = this.prefixInteger(days, 2);
        } else {
          const diffTime = moment(this.endTime).diff(moment());
          const timeVal = moment.duration(diffTime)[key]();
          this.time[key] = this.prefixInteger(timeVal, 2);
        }
      });
    },
    //初始化倒计时
    initCountdown(){
       if(this.$countdown) clearInterval(this.$countdown);
       if(this.endTime - Date.now() > 0) {
         this.time = this.countdown(); //首次
         //定时器
         this.$countdown = setInterval(()=>{
            if(this.endTime - Date.now() <= 0) {
              clearInterval(this.$countdown);
              this.time = "";
            }else {
              this.time = this.countdown();
            }
         },1000);
       }
    },
    //补零
    prefixInteger(num, length) {
      return (Array(length).join("0") + num).slice(-length);
    },
  },
  created() {
    this.initCountdown();
  },
  beforeDestroy() {
    if(this.$countdown) clearInterval(this.$countdown);
  },
}
</script>

这里就是我目前所使用方法了，这里再提供一个不用插件的纯js方法：

原生js计算倒计时

const endTime = 1614217890000; //ms 过期时间
let time = {
  days:"",
  hours:"",
  minutes:"",
  seconds:""
};

const seconds = endTime -  Date.now();

time.days = Math.floor(seconds / (60 * 60 * 24));
time.hours = Math.floor(seconds / (60 * 60)) - time.days * 24;
time.minutes = Math.floor(seconds / 60) - time.days * 24 * 60 - time.hours * 60;
time.seconds = Math.floor(seconds) - time.days * 24 * 60 * 60 - time.hours * 60 * 60 - time.minutes * 60;

//手动三元补零
time.days = time.days < 10 ? "0" + time.days : time.days;
time.hours = time.hours < 10 ? "0" + time.hours : time.hours;
time.minutes = time.minutes < 10 ? "0" + time.minutes : time.minutes;
time.seconds = time.seconds < 10 ? "0" + time.seconds : time.seconds;

这个就是js计算倒计时的方法了，自己根据自己情况改动改动。