欢迎加我技术交流QQ群 ：811956471
前言：最近开发商城需要一个倒计时组件,就自己封装了一个，方便自己以后使用。
事件以及属性介绍：
事件： @time-end：倒计时时间结束触发
属性：endTime：剩余的时间：格式为时间戳或 yyyy-mm-dd hh:mm:ss
属性：tempDownBg：// 倒计时容器背景颜色：值有：temp_down_blackBg（默认）、temp_down_redBg
属性：isShowDay：布尔值,//是否显示天:默认false不显示天，把天全部转换成小时，即：时：分：秒
属性：endTimeType：布尔值,//剩余的时间格式：默认为时间戳(单位秒)、false为：yyyy-mm-dd hh:mm:ss
组件模板源码：
<template>
<view class="page">
<!-- 基础用法： -->
<!-- <view class="time">{{timeArry.h:timeArry.m:timeArry.s}}</view> -->
<!-- 带入样式： -->
<view class="temp_down_time_bx">
<view :class="['temp_down_time_item',tempDownBg]" v-if="isShowDay">{{timeArry.d}}</view>
<view class="temp_down_time_dot" v-if="isShowDay">天</view>
<view :class="['temp_down_time_item',tempDownBg]">{{timeArry.h}}</view>
<view class="temp_down_time_dot ">:</view>
<view :class="['temp_down_time_item',tempDownBg]">{{timeArry.m}}</view>
<view class="temp_down_time_dot">:</view>
<view :class="['temp_down_time_item',tempDownBg]">{{timeArry.s}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
timeArry:{},
flag: false
}
},
props: {
// 剩余的时间：格式为时间戳或 yyyy-mm-dd hh:mm:ss,如果是时间戳会转换成yyyy-mm-dd hh:mm:ss
endTime: {
type: String
},
// 剩余的时间格式：默认为时间戳(单位秒)、false为：yyyy-mm-dd hh:mm:ss
endTimeType: {
type: Boolean,
default:true
},
// 倒计时容器背景颜色
tempDownBg:{
type: String,
default:"temp_down_blackBg"
},
//是否显示天:默认false不显示天，把天全部转换成小时，即：时：分：秒
isShowDay:{
type: Boolean,
default:false
},
},
mounted() {
let time = setInterval(() => {
if (this.flag == true) {
clearInterval(time)
}
this.timeDown()
}, 1000)
},
methods: {
timeDown() {
//如果传入的是一个时间戳，调用this.formatDate(this.endTime)次方法转成：2019-09-22 20:38:14格式
let t=this.endTime;
if(this.endTimeType){
t = this.formatDate(this.endTime);
}
// console.log("方法转成:",t)
const endTime = new Date(t);
const nowTime = new Date();
let h="";
let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000)
console.log("剩余时间leftTime_单位秒:",leftTime)
let d = parseInt(leftTime / (24 * 60 * 60))
h = this.formate(parseInt(leftTime / (60 * 60) % 24))
let h_day = this.formate(parseInt(leftTime / (60 * 60)))
let m = this.formate(parseInt(leftTime / 60 % 60))
let s = this.formate(parseInt(leftTime % 60))
if(!this.isShowDay){
h=h_day
}
if (leftTime < 0) {
this.flag = true
this.$emit('time-end')
this.timeArry={
d:0,
h:0,
m:0,
s:0
}
} else {
//如果不显示天会把天转换成总共小时数量，时间位置取 h_day变量
// this.time = `${h_day}:${m}:${s}`
// this.time_day = `${d}天${h}小时${m}分${s}秒`
this.timeArry={
d:d,
h:h,
m:m,
s:s
}
}
},
formate(time) {
if (time >= 10) {
return time
} else {
return `0${time}`
}
},
//如果传入的是一个时间戳，调用次方法转成：2019-09-22 20:38:14格式
formatDate: function(value) {
if (value != null && value != '') {
value = value * 1;
let date = new Date(value * 1000);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? '0' + MM : MM;
let d = date.getDate();
d = d < 10 ? '0' + d : d;
let h = date.getHours();
h = h < 10 ? '0' + h : h;
let m = date.getMinutes();
m = m < 10 ? '0' + m : m;
let s = date.getSeconds();
s = s < 10 ? '0' + s : s;
return y + '/' + MM + '/' + d + ' ' + h + ':' + m + ':' + s;
// return y + '-' + MM + '-' + d;
}
},
}
}
</script>
<style scoped>
.temp_down_time_bx {
display: flex;
align-items: center;
font-family: PingFangSC-Medium, PingFangSC;
text-align: center;
}
.temp_down_time_item {
width: 26rpx;
height: 23rpx;
border-radius: 4rpx;
font-size: 20rpx;
font-weight: 500;
color: rgba(255, 255, 255, 1);
line-height: 23rpx;
}
/* 黑色背景 */
.temp_down_blackBg{
background: #666666;
}
/* 黄红渐变色背景 */
.temp_down_redBg{
background:linear-gradient(135deg,rgba(242,131,9,1) 0%,rgba(230,36,15,1) 100%);
}
.temp_down_time_dot {
font-size: 20rpx;
}
</style>
在页面中使用;
<template>
<view class="page">
<my-down-time @time-end="endTimeFn" :endTime="end_time" tempDownBg="temp_down_redBg" isShowDay="true"></my-down-time>
<my-down-time @time-end="endTimeFn" :endTime="end_time" ></my-down-time>
</view>
</template>
<script>
import myDownTime from '@/components/myDownTime.vue'
export default {
components: {
myDownTime
},
data() {
return {
pageTitle:"倒计时组件",
end_time:"1569740940"
}
},
onLoad() {
},
onShow() {
},
onReady() {
},
methods: {
//时间结束事件
endTimeFn(){
console.log("时间结束事件触发了")
}
}
}
</script>
<style scoped>
</style>
