毫秒轉換天時分秒倒計時

因爲項目基於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;
}

最後附上 插件下載地址

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章