直播軟體app開發，產品頁面顯示折扣倒數計時一欄

直播軟體app開發，產品頁面顯示折扣倒數計時一欄

（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;
            }
        }
    }
}

（4）在頁面中引入元件，並且使用元件

//引入元件
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>

以上就是 直播軟體app開發，產品頁面顯示折扣倒數計時一欄，更多內容歡迎關注之後的文章