毫秒转换天时分秒倒计时

小灰灰 2023-07-21 11:19 10阅读 0赞

因为项目基于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;
    }

最后附上 [插件下载地址][Link 1]

[Link 1]: https://ext.dcloud.net.cn/plugin?id=1572