uni-app 倒计时组件

港控/mmm° 2023-06-20 12:57 37阅读 0赞

<template>
    	<view class="page" :style="{color: fontColor}">
    		<view class="title" v-if="!isStart">
    			距离开始：
    		</view>
    		<view class="title" v-else>
    			距离结束：
    		</view>
    		<view class="days">
    			{
       {time.day || '00'}}天
    		</view>
    		<view class="hour">
    			{
       {time.hour || '00'}}时
    		</view>
    		<view class="minutes">
    			{
       {time.min || '00'}}分
    		</view>
    		<view class="security">
    			{
       {time.sec || '00'}}秒
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data () {
    			return {
    				time: {},
    				isStart: false,
    			}
    		},
    		props: {
    			start_time: String,
    			end_time: String,
    			fontColor: String
    		},
    		mounted() {
    			this.countDown()
    		},
    		methods: {
    			timeFormat(param) {
    				return param < 10 ? '0' + param : param;
    			},
    			countDown () {
    				var interval = setInterval(() => {
    					// 当前时间
    					let nowTime = new Date().getTime();
    					let endTime = new Date((this.end_time.replace(/-/g,'/'))).getTime();
    					let startTime = new Date((this.start_time.replace(/-/g,'/'))).getTime();
    					// 已开始
    					if (startTime - nowTime <= 0) {
                            if (endTime - nowTime <= 0) {
    						   // 计时结束
    						    clearInterval(interval)
    					    } else {
                                this.isStart = true;
    						    let time = (endTime - nowTime) / 1000;
    						    let day = parseInt(time / (60*60*24));
    						    let hour = parseInt(time % (60*60*24) / 3600);
    						    let min = parseInt(time % (60*60*24) % 3600 / 60);
    						    let sec = parseInt(time % (60*60*24) % 3600 %60);
    						    this.time = {
    							    day: this.timeFormat(day),
    							    hour: this.timeFormat(hour),
    							    min: this.timeFormat(min),
    							    sec: this.timeFormat(sec)
    						    }
                            }
    					} else if (startTime - nowTime > 0) {  // 即将开始
    						this.isStart = false
    						let time = (startTime - nowTime) / 1000;
    						let day = parseInt(time / (60*60*24));
    						let hour = parseInt(time % (60*60*24) / 3600);
    						let min = parseInt(time % (60*60*24) % 3600 / 60);
    						let sec = parseInt(time % (60*60*24) % 3600 %60);
    						this.time = {
    							day: this.timeFormat(day),
    							hour: this.timeFormat(hour),
    							min: this.timeFormat(min),
    							sec: this.timeFormat(sec)
    						}
    					}
    				}, 1000)
    			}
    		}
    	}
    </script>
    
    <style scoped lang="less">
    	.page {
    		width: 100%;
    		font-size: 24upx;
    		display: flex;
    		align-items: center;
    		.days,.title {
    			margin-right: 10upx;
    		}
    	}
    </style>

计时开始则返回距离结束的时间；

计时还未开始则返回距离计时开始的时间；

调用

真机调试遇到的一个问题就是倒计时在Android / IOS 端无效，原因是App 端无法解析这种类型的时间格式“2019-12-10 12:20:00”，解决办法是将时间格式转为“2019/12/10 12:20:00”

使用正则表达式

.replace(/-/g,'/')

如果发现有问题的话请留言