如何利用momentJs做一个倒计时组件

今天就跟大家聊聊有关如何利用momentJs做一个倒计时组件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

vue和moment做的一个倒计时

展示样式：

<template>    <div class="table-right flex-a-center">        <div class="time-text">            <span class="timeTextSpan" v-for="item,index of h" >{{item}}</span>            <span class="timeTextSpan1" >: </span>            <span class="timeTextSpan" v-for="item,index of m" >{{item}}</span>            <span class="timeTextSpan1" >: </span>            <span class="timeTextSpan" v-for="item,index of s" >{{item}}</span>        </div>    </div></template>

<script>import moment from 'moment'export default {  props: {    endTime: { }, //接收得最后时间 2021-12-17 16：29：20  },  data() {    //这里存放数据    return {      h:'00',      m:'00',      s:'00',      timer:null    };  },  watch: {    endTime: {      handler(e) {        if (e) {          let self = this          clearInterval(this.timer)          this.timer = setInterval(function(){self.init()},1000)        }      },      deep: true,      immediate: true    }  },  mounted() {    let self = this    self.init()    clearInterval(this.timer)    this.timer = setInterval(function(){self.init()},1000)  },  //方法集合  methods: {    init(){        let time =moment(this.endTime).diff(moment())        if(time <= 0){          clearInterval(this.timer)          this.onOver()          return        }        let t = time / 1000;        let d = Math.floor(t / (24 * 3600));  //剩余天数，如果需要可以自行补上        let h = Math.floor((t - 24 * 3600 * d) / 3600) + d*24;  //不需要天数，把天数转换成小时        let _h = Math.floor((t - 24 * 3600 * d) / 3600)  //保留天数后得小时        let m = Math.floor((t - 24 * 3600 * d - _h * 3600) / 60);        let s = Math.floor((t - 24 * 3600 * d - _h * 3600 - m * 60));               this.h = String(h).length == 1? '0'+String(h):String(h)        this.m = String(m).length == 1? '0'+String(m):String(m)        this.s = String(s).length == 1? '0'+String(s):String(s)    },    onOver() {      this.$emit('over') //倒计时结束得回调    }   },  beforeDestroy(){    this.timer = null    clearInterval(this.timer)  }}</script><style lang='less' scoped>@import url("@/assets/css/supplier.less");   .table-right {    font-size: 12px;    color: #757e8a;    .timeTextSpan{      display: inline-block;      width: 14px;      height: 22px;      text-align: center;      background: #F1F0F0;      border-radius: 2px;      margin-right: 2px;      font-size: 16px;      color: #ff8a2b;      font-weight: bold;    }    .timeTextSpan1{      display: inline-block;      width: 14px;      text-align: center;      vertical-align: bottom;      color:#202D40;      font-size: 16px;      font-weight: bold;    }       .time-text {      margin-left: 10px;    }  }</style>

看完上述内容，你们对如何利用momentJs做一个倒计时组件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网行业资讯频道，感谢大家的支持。