您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)如何利用momentJs做一個(gè)倒計(jì)時(shí)組件,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
vue和moment做的一個(gè)倒計(jì)時(shí)
展示樣式:
<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: { }, //接收得最后時(shí)間 2021-12-17 16:29:20 }, data() { //這里存放數(shù)據(jù) 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)); //剩余天數(shù),如果需要可以自行補(bǔ)上 let h = Math.floor((t - 24 * 3600 * d) / 3600) + d*24; //不需要天數(shù),把天數(shù)轉(zhuǎn)換成小時(shí) let _h = Math.floor((t - 24 * 3600 * d) / 3600) //保留天數(shù)后得小時(shí) 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') //倒計(jì)時(shí)結(jié)束得回調(diào) } }, 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>
看完上述內(nèi)容,你們對如何利用momentJs做一個(gè)倒計(jì)時(shí)組件有進(jìn)一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。