直播软件app开发，产品页面显示折扣倒计时一栏

（1）封装倒计时的组件

<br><!-- 子组件活动倒计时 --><br><template id="countBackwards"><br>    <div class="uni-countdown"><br>        <span class="font-middle">{{title}}</span><br>        <span v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ d }}</span><br>        <span v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</span><br>        <span :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ h }}</span><br>        <span :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</span><br>        <span :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ i }}</span><br>        <span :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</span><br>        <span :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ s }}</span><br>        <span v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</span><br>    </div><br></template>

（2）组件样式

<br>.backwards {<br>    flex-direction: row;<br>    padding: 9px 4%;<br>    flex-wrap: wrap;<br>    justify-content: center;<br>    font-size: 7px;<br>    <br>}<br>.uni-countdown {<br>    display: flex;<br>    flex-direction: row;<br>    justify-content: flex-start;<br>    align-items: center;<br>    color: #fff;<br>}<br>.font-middle {<br>    font-size: 14px;<br>}<br>.uni-countdown__number {<br>    display: flex;<br>    justify-content: center;<br>    align-items: center;<br>    width: 26px;<br>    height: 24px;<br>    line-height: 24px;<br>    margin: 2px;<br>    text-align: center;<br>    font-size: 12px;<br>}<br>.uni-countdown__splitor {<br>    display: flex;<br>    justify-content: center;<br>    line-height: 24px;<br>    padding: 2px;<br>    font-size: 12px;<br>}

（3）注册子组件活动倒计时

<br>//注册子组件活动倒计时<br>const countBackwards = {<br>    template: '#countBackwards',<br>    props: {<br>        showDay: {<br>            type: Boolean,<br>            default: true<br>        },<br>        showColon: {<br>            type: Boolean,<br>            default: true<br>        },<br>        backgroundColor: {<br>            type: String,<br>            default: '#FFFFFF'<br>        },<br>        borderColor: {<br>            type: String,<br>            default: '#000000'<br>        },<br>        color: {<br>            type: String,<br>            default: '#fff'<br>        },<br>        splitorColor: {<br>            type: String,<br>            default: '#fff'<br>        },<br>        day: {<br>            type: Number,<br>            default: 0<br>        },<br>        hour: {<br>            type: Number,<br>            default: 15<br>        },<br>        minute: {<br>            type: Number,<br>            default: 20<br>        },<br>        second: {<br>            type: Number,<br>            default: 10<br>        },<br>        title: {<br>            type: String,<br>            default: "距离活动开始： "<br>        }<br>    },<br>    data() {<br>        return {<br>            timer: null,<br>            syncFlag: false,<br>            d: '00',<br>            h: '00',<br>            i: '00',<br>            s: '00',<br>            leftTime: 0,<br>            seconds: 0<br>        }<br>    },<br>    watch: {<br>        day(val) {<br>            this.changeFlag()<br>        },<br>        hour(val) {<br>            this.changeFlag()<br>        },<br>        minute(val) {<br>            this.changeFlag()<br>        },<br>        second(val) {<br>            this.changeFlag()<br>        }<br>    },<br>    created: function (e) {<br>        this.startData();<br>    },<br>    beforeDestroy() {<br>        clearInterval(this.timer)<br>    },<br>    methods: {<br>        toSeconds(day, hours, minutes, seconds) {<br>            return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds<br>        },<br>        timeUp() {<br>            clearInterval(this.timer)<br>            this.$emit('timeup')<br>        },<br>        countDown() {<br>            let seconds = this.seconds<br>            let [day, hour, minute, second] = [0, 0, 0, 0]<br>            if (seconds > 0) {<br>                day = Math.floor(seconds / (60 * 60 * 24))<br>                hour = Math.floor(seconds / (60 * 60)) - (day * 24)<br>                minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)<br>                second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)<br>            } else {<br>                this.timeUp()<br>            }<br>            if (day < 10) {<br>                day = '0' + day<br>            }<br>            if (hour < 10) {<br>                hour = '0' + hour<br>            }<br>            if (minute < 10) {<br>                minute = '0' + minute<br>            }<br>            if (second < 10) {<br>                second = '0' + second<br>            }<br>            this.d = day<br>            this.h = hour<br>            this.i = minute<br>            this.s = second<br>        },<br>        startData() {<br>            this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)<br>            if (this.seconds <= 0) {<br>                return<br>            }<br>            this.countDown()<br>            this.timer = setInterval(() => {<br>                this.seconds--<br>                if (this.seconds < 0) {<br>                    this.timeUp()<br>                    return<br>                }<br>                this.countDown()<br>            }, 1000)<br>        },<br>        changeFlag() {<br>            if (!this.syncFlag) {<br>                this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)<br>                this.startData();<br>                this.syncFlag = true;<br>            }<br>        }<br>    }<br>}

（3）在页面中引入组件，并且使用组件

<br>//引入组件<br>components: {<br>    countBackwards<br>}<br>//页面使用组件<br><!--活动倒计时--><br><div class="backwards"><br>    <count-backwards <br>    :show-colon="false"<br>        :show-day="false"<br>        title="距离活动结束： "<br>        color="#e60012"<br>        background-color="#FFFFFF"<br>        border-color="#FFFFFF"><br>    </count-backwards><br></div>

以上就是直播软件app开发，产品页面显示折扣倒计时一栏，更多内容欢迎关注之后的文章