Introduction: In normal times, the countdown is used in many scenarios, such as the countdown to the New Year and the countdown to the opening of commodities. Therefore, it is very necessary to do a good job in the countdown. Let’s take a look at the renderings first.
1. Effect diagram
2. It is not difficult to achieve this effect, it only takes 4 steps
Note: The following code takes Vue as an example. If you need to implement uni-app, you can change the elements of html and introduce components.
(1) Components that encapsulate the countdown
<!-- 子组件活动倒计时 -->
<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) Component style
.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) Countdown to register subcomponent activities
//注册子组件活动倒计时
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) Introduce components into the page and use components
//引入组件
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>
3. Interpretation of the parameters of the component
(1) showDay: Whether it is necessary to display the number of days, I do not need it here, if necessary, pass true
(2) showColon: whether to display the time in the way of ":", I do not need it here, so The time is displayed in hours, minutes and seconds
(3) backgroundColor: the background color in the time area
(4) borderColor: the background border color in the time area
(5) color: the digital color of the hours, minutes and seconds
(6) splitorColor: the text color of the hours, minutes and seconds
(7) day: the number of days, pass 1, indicating that there is one day left
(8) hour: hour, pass 18, indicating that there are 18 hours left
(9) minute: minutes, pass 50, indicating that there are 50 minutes left
(10) second: seconds, such as passing 30, it means that there are 30 seconds left in the distance
Example
- showDay:true;day:2;hour:18;minute:50;second:20;//Indicates 2 days, 18:50:20, and the hour range at this time is (0-24);
- showDay:false;hour:26;minute:50;second:20;//Indicates 26:50:20, the hour range at this time (hour>=0);