因爲項目基於uniapp開發,所以就用uniapp的寫法,只要知道具體放他,就可以自己 修改自己用了
樣式 就不詳細寫了 自己寫。
<view class="bw-cd">
{{cdStr}}
</view>
let setStartTime;
export default {
data() {
return {
cdTime:0,
cdStr:'',
};
},
methods:{
/*清空倒計時*/
clearStartTime(){
return new Promise( (res,rel) => {
clearInterval(setStartTime);
setStartTime = null;
this.cdStr = '';
res();
})
},
formatSeconds(t) {
let mi = 60,hh = mi*60,dd = hh*24;
let d = this.formatBit( Math.floor(t/dd)),
h = this.formatBit( Math.floor((t - d*dd)/hh)),
m = this.formatBit( Math.floor((t - d*dd - h*hh)/mi)),
s = this.formatBit( Math.floor((t - d*dd - h*hh - m*mi)));
let tstr = d+'天'+h+'小時'+m+"分"+s+'秒';
return tstr;
},
initTime(time){
this.clearStartTime().then( ()=> {
this.cdTime = Math.floor(time/1000);
console.log(this.cdTime);
setStartTime = setInterval(() => {
this.cdTime--;
this.cdStr = this.formatSeconds(this.cdTime);
// console.log(this.cdStr);
if (this.cdTime <= 0) {
clearInterval(setStartTime)
this.$emit('bwCountdown');
}
}, 1000)
})
},
formatBit(v){
v = +v
return v > 9 ? v : '0' + v
},
}
}
.bw-cd{
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
最後附上 插件下載地址