您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
今天就跟大家聊聊有关如何利用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做一个倒计时组件有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。