vue计时组件

一、倒计时组件

<template>
    <div class="countDown">
        <p>{{ showTime }}</p>
    </div>
</template>

<script>
export default {
    name: 'CountDown',
    props: {
        time: {
            type: Number
        },
        index: {
            type: String
        },
        draftId: {
            type: String
        }
    },
    data () {
        return {
        clearTime: null,
        showTime: ''
        }
    },
    methods: {
        Djs_time (time) {
            let result = parseInt(time / 1000)
            this.clearTime = setInterval(() => {
                if (result > 0) {
                    const h = Math.floor(result / 60 / 60) < 10 ? '0' + Math.floor(result / 60 / 60) : Math.floor(result / 60 / 60)
                    const m = Math.floor((result - h * 60 * 60) / 60) < 10 ? '0' + Math.floor((result - h * 60 * 60) / 60) : Math.floor((result - h * 60 * 60) / 60)
                    const s = Math.floor((result - h * 60 * 60 - m * 60)) < 10 ? '0' + Math.floor((result - h * 60 * 60 - m * 60)) : Math.floor((result - h * 60 * 60 - m * 60))
                    result--
                    if (h === '00') {
                        this.showTime = `剩余${m}分${s}秒`
                    } else if (h === '00' && m === '00') {
                        this.showTime = `剩余${s}秒`
                    } else {
                        this.showTime = `剩余${h}时${m}分${s}秒`
                    }
                } else {
                    clearInterval(this.clearTime)
                    this.showTime = '00分00秒'
                }
            }, 1000)
        }
    },
    beforeDestroy () {
        clearInterval(this.clearTime)
    },
    created () {
        setTimeout(() => {
            this.Djs_time(this.time)
        }, 500)
    }
}
</script>

<style lang="stylus" scoped>
.countDown
    p
        margin 0
        font-size 12px
        color #f00415
</style>

二、正计时和倒计时

<template>
    <div class="time-color" :class="{'time-color-active': isColor}">
        <!-- 持票方 - 接单方正计时和倒计时组件 -->
        <span class="el-icon-loading" v-if="!timeText"></span>
        <span v-else>{{timeText}}</span>
    </div>
</template>

<script>
export default {
    name: 'OrderTime',
    props: {
        time: {
            type: Number,
            default: 0
        }
    },
    data () {
        return {
            isColor: false,
            timeInterval: null,
            timeText: '',
            showTime: this.time
        }
    },
    methods: {
        // 正计时
        timing () {
            let hour = 0
            let minute = 0
            let second = 0
            let count = this.showTime / 1000
            this.isColor = true
            clearInterval(this.timeInterval)
            this.timeInterval = setInterval(() => {
                hour = parseInt(count / 3600)
                minute = parseInt(count / 60 % 60)
                second = parseInt(count % 60)
                this.timeText = this.toDouble(hour) + '时' + this.toDouble(minute) + '分' + this.toDouble(second) + '秒'
                count++
            }, 1000)
        },
        // 倒计时
        countDown () {
            let hour = 0
            let minute = 0
            let second = 0
            const num = Math.abs(this.showTime)
            let count = num / 1000
            clearInterval(this.timeInterval)
            this.timeInterval = setInterval(() => {
                hour = parseInt(count / 3600)
                minute = parseInt(count / 60 % 60)
                second = parseInt(count % 60)
                this.timeText = this.toDouble(hour) + '时' + this.toDouble(minute) + '分' + this.toDouble(second) + '秒'
                count--
                if (count < 0) {
                    clearInterval(this.timeInterval)
                    this.showTime = 0
                    this.timing()
                    this.$emit('getList')
                }
            }, 1000)
        },
        // 时间补0
        toDouble (n) {
            if (n < 10) {
                return '0' + n
            } else {
                return '' + n
            }
        }
    },
    beforeDestroy () {
        clearInterval(this.timeInterval)
    },
    mounted () {
        if (this.showTime >= 0) {
            this.timing()
        } else {
            this.countDown()
        }
    },
    created () {
    },
    watch: {}
}
</script>

<style lang="stylus" scoped>
    @import '~assets/styles/varibles.styl';
    .time-color
        color $mainColor
    .time-color-active
        color #F00415
</style>