倒计时封装

倒计时封装

export function countDown(counteDate) {
	var timestamp = parseInt(new Date(counteDate).getTime());
	let now = new Date().getTime()
	let gap = timestamp - now
	let seconds = 1000
	let minutes = seconds * 60
	let hours = minutes * 60
	let days = hours * 24
	let d = Math.floor(gap / (days))
	let h = Math.floor((gap % (days)) / (hours))
	let m = Math.floor((gap % (hours)) / (minutes))
	let s = Math.floor((gap % (minutes)) / (seconds))
	// console.log(`距离2027年还有 ${d} 天 ${h} 小时 ${m} 分钟 ${s} 秒 `);
	if(d<10){
		d="0"+d
	}else{
		d=""+d
	}
	if(h<10){
		h="0"+h
	}else{
		h=""+h
	}
	if(m<10){
		m="0"+m
	}else{
		m=""+m
	}
	if(s<10){
		s="0"+s
	}else{
		s=""+s
	}
	let overTime = {
		day: d,
		hour: h,
		minute: m,
		second: s
	}
	if (d > 0 || h > 0 || m > 0|| s > 0) {
		return overTime
	} else {
		return false
	}

}

使用

vue代码

<view class="over-time m-height" v-if="timerStatus">报名已截止</view>
			<view class="over-time" v-else>报名倒计时</view>
			<view class="timer" v-if="!timerStatus">
				<view class="timer-bg">
					{{overtimer.day.slice(0,1)}}
				</view>
				<view class="timer-bg">
					{{ overtimer.day.slice(1,2)}}
				</view>
				<view class="txt">
					天
				</view>
				<view class="timer-bg">
					{{overtimer.hour.slice(0,1)}}
				</view>
				<view class="timer-bg">
					{{overtimer.hour.slice(1,2)}}
				</view>
				<view class="txt">
					时
				</view>
				<view class="timer-bg">
					{{overtimer.minute.slice(0,1)}}
				</view>
				<view class="timer-bg">
					{{overtimer.minute.slice(1,2)}}
				</view>
				<view class="txt">
					分
				</view>
				<view class="timer-bg">
					{{overtimer.second.slice(0,1)}}
				</view>
				<view class="timer-bg">
					{{ overtimer.second.slice(1,2)}}
				</view>
			</view>

css代码

.over-time {
			color: #333333;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			box-sizing: border-box;
			padding-top: 30rpx;
		}

		.m-height {
			min-height: 900rpx;
		}

		//倒计时样式
		.timer {
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			margin-top: 10rpx;
			box-sizing: border-box;
			padding-bottom: 30rpx;
			.timer-bg {
				background-color: #444444;
				color: #FFFFFF;
				width: 30rpx;
				text-align: center;
				margin-right: 5rpx;
				border-radius: 3rpx;
				box-shadow: 0 3rpx 10rpx #444444;
			}

			.txt {
				margin-bottom: -15rpx;
				margin-right: 5rpx;
			}
		}

时间相关

// 时间状态
export function dateContrast(startDate, endDate) {
  let nowDateTime = new Date().getTime();
  let startDateTime = new Date(startDate).getTime();
  let endDateTime = new Date(endDate).getTime() + 24 * 60 * 60 * 1000;
  //结束时间小于当前时间，已结束
  if (endDateTime < nowDateTime) {
    return 1;
  }
  //开始时间大于当前时间，未开始
  if (startDateTime > nowDateTime) {
    return 2;
  }
  return 3;
}
// 当前时间
export function currentDate() {
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  if (month < 10) {
    month = "0" + month;
  }

  if (day < 10) {
    day = "0" + day;
  }
  return `${year}-${month}-${day}`;
}
//过去一个月时间
export function getLastMonth(date) {
  let now = new Date(date);
  let year = now.getFullYear();
  let month = now.getMonth();
  let day = now.getDate();
  if (day < 10) {
    day = "0" + day;
  }
  // 当前月的总天数
  let nowMonthDay = new Date(year, month, 0).getDate();
  // 如果是1月，年数往前推一年
  if (month <= 0) return year - 1 + "-" + 12 + "-" + day;
  let lastMonthDay = new Date(year, parseInt(month), 0).getDate();
  if (lastMonthDay >= day) return year + "-" + month + "-" + day;
  // 1个月前所在月的总天数小于现在的天日期
  if (day < nowMonthDay)
    return year + "-" + month + "-" + (lastMonthDay - (nowMonthDay - day));
  // 当前天日期小于当前月总天数
  return year + "-" + month + "-" + lastMonthDay;
}