今天就跟大家聊聊有关如何利用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做一个倒计时组件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网行业资讯频道，感谢大家的支持。
