导读：在平时，倒计时的运用场景非常多，比如新年倒计时、商品的开抢倒计时，因此把倒计时做好十分必要，我们先看下效果图。
一、效果图
二、实现该效果并不难，只需要4步走
注意：下面代码以Vue为例，如果需要实现uni-app，则改动html的元素，并且引入组件即可
（1）封装倒计时的组件
<!-- 子组件活动倒计时 -->
<template id="countBackwards">
<div class="uni-countdown">
<span class="font-middle">{
{
title}}</span>
<span v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{
{
d }}</span>
<span v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</span>
<span :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{
{
h }}</span>
<span :style="{ color: splitorColor }" class="uni-countdown__splitor">{
{
showColon ? ':' : '时' }}</span>
<span :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{
{
i }}</span>
<span :style="{ color: splitorColor }" class="uni-countdown__splitor">{
{
showColon ? ':' : '分' }}</span>
<span :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{
{
s }}</span>
<span v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</span>
</div>
</template>
（2）组件样式
.backwards {
flex-direction: row;
padding: 9px 4%;
flex-wrap: wrap;
justify-content: center;
font-size: 7px;
background-color: #e60012;
}
.uni-countdown {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
color: #fff;
}
.font-middle {
font-size: 14px;
}
.uni-countdown__number {
display: flex;
justify-content: center;
align-items: center;
width: 26px;
height: 24px;
line-height: 24px;
margin: 2px;
text-align: center;
font-size: 12px;
}
.uni-countdown__splitor {
display: flex;
justify-content: center;
line-height: 24px;
padding: 2px;
font-size: 12px;
}
（3）注册子组件活动倒计时
//注册子组件活动倒计时
const countBackwards = {
template: '#countBackwards',
props: {
showDay: {
type: Boolean,
default: true
},
showColon: {
type: Boolean,
default: true
},
backgroundColor: {
type: String,
default: '#FFFFFF'
},
borderColor: {
type: String,
default: '#000000'
},
color: {
type: String,
default: '#fff'
},
splitorColor: {
type: String,
default: '#fff'
},
day: {
type: Number,
default: 0
},
hour: {
type: Number,
default: 15
},
minute: {
type: Number,
default: 20
},
second: {
type: Number,
default: 10
},
title: {
type: String,
default: "距离活动开始： "
}
},
data() {
return {
timer: null,
syncFlag: false,
d: '00',
h: '00',
i: '00',
s: '00',
leftTime: 0,
seconds: 0
}
},
watch: {
day(val) {
this.changeFlag()
},
hour(val) {
this.changeFlag()
},
minute(val) {
this.changeFlag()
},
second(val) {
this.changeFlag()
}
},
created: function (e) {
this.startData();
},
beforeDestroy() {
clearInterval(this.timer)
},
methods: {
toSeconds(day, hours, minutes, seconds) {
return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
},
timeUp() {
clearInterval(this.timer)
this.$emit('timeup')
},
countDown() {
let seconds = this.seconds
let [day, hour, minute, second] = [0, 0, 0, 0]
if (seconds > 0) {
day = Math.floor(seconds / (60 * 60 * 24))
hour = Math.floor(seconds / (60 * 60)) - (day * 24)
minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
} else {
this.timeUp()
}
if (day < 10) {
day = '0' + day
}
if (hour < 10) {
hour = '0' + hour
}
if (minute < 10) {
minute = '0' + minute
}
if (second < 10) {
second = '0' + second
}
this.d = day
this.h = hour
this.i = minute
this.s = second
},
startData() {
this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
if (this.seconds <= 0) {
return
}
this.countDown()
this.timer = setInterval(() => {
this.seconds--
if (this.seconds < 0) {
this.timeUp()
return
}
this.countDown()
}, 1000)
},
changeFlag() {
if (!this.syncFlag) {
this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
this.startData();
this.syncFlag = true;
}
}
}
}
（3）在页面中引入组件，并且使用组件
//引入组件
components: {
countBackwards
}
//页面使用组件
<!--活动倒计时-->
<div class="backwards">
<count-backwards
:show-colon="false"
:show-day="false"
title="距离活动结束： "
color="#e60012"
background-color="#FFFFFF"
border-color="#FFFFFF">
</count-backwards>
</div>
三、组件的参数解读
（1）showDay：是否需要显示天数，我这里是不需要，如果需要则传true
（2）showColon：是否以":"的方式来显示时间，我这里时不需要，所以时间是以时分秒来显示
（3）backgroundColor：时间区域内的背景颜色
（4）borderColor：时间区域内的背景边框颜色
（5）color：时分秒的数字颜色
（6）splitorColor：时分秒的文字颜色
（7）day：天数，传1，表示距离还剩一天
（8）hour：时，传18，表示距离还剩18小时
（9）minute：分，传50，表示距离还剩50分
（10）second：秒，比如传30，表示距离还剩30秒
举例
- showDay:true;day:2;hour:18;minute:50;second:20;//表示2天18时50分20秒，此时的hour范围在（0-24）；
- showDay:false;hour:26;minute:50;second:20;//表示26时50分20秒，此时的hour范围（hour>=0）；