uniapp倒计时

墨蓝 2023-01-04 11:47 189阅读 0赞

<template>
    	<view>
    		<view class="">
    			{ { countdown_time}}
    		</view>
    	</view>
    </template>
    
    <script>
    	export default { 
    		props: { 
    			downTime: { 
    				type: String,
    				default: '2021-01-09 18:00:00'
    			}
    		},
    		data() { 
    			return { 
    				countdown_time: '00时00分00秒',
    			}
    		},
    		mounted(){ 
    			this.countTime()
    		},
    		methods: { 
    			countTime() { 
    				//获取当前时间 
    				var date = new Date();
    				var now = date.getTime();
    				//设置截止时间
    				// str = "2021/1/9 16:59:00";
    				// console.log(this.downTime,"截止时间")
    				var str = this.downTime
    				var endDate = new Date(str);
    				var end = endDate.getTime();
    				//时间差 
    				var leftTime = end - now;
    				if (leftTime <= 0) { 
    					this.countdown_time = "已结束"
    					return
    				}
    				//定义变量 d,h,m,s保存倒计时的时间 
    				var d, h, m, s;
    				if (leftTime >= 0) { 
    					  // d = Math.floor(leftTime/1000/60/60/24); 
    					h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
    					m = Math.floor(leftTime / 1000 / 60 % 60);
    					s = Math.floor(leftTime / 1000 % 60);
    				}
    				//将倒计时赋值到view中 
    				this.countdown_time = `${ h}时${ m}分${ s}秒`
    				//递归每秒调用countTime方法，显示动态时间效果 
    				var timers = setTimeout(this.countTime, 1000);
    			},
    		},
    	}
    </script>
    
    <style lang="scss">
    	/deep/ .uni-searchbar { 
    		background-color: rgb(79, 191, 141);
    	}
    
    	/deep/ .uni-searchbar__cancel { 
    		color: #fff;
    	}
    </style>