木灵鱼儿

木灵鱼儿

阅读:574

最后更新:2021/02/25/ 18:50:56

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计算倒计时的方法了,自己根据自己情况改动改动。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 574

相关文章