uni-app（vue）通用倒计时组件-蒲公英云

uni-app（vue）通用倒计时组件

青旅半醒 2022-11-27 07:09 579阅读 0赞

<template>
    <view>
        <view class="count">
            <view class="list">{ { hour}}:</view>
            <view class="list">{ { minute}}:</view>
            <view class="list">{ { second}}</view>
        </view>
    </view>
</template>
<script>
    export default { 
        name: "countdown",
        props: { 
            start: { 
                type: Number,
                default: 0
            },
            finish: { 
                type: Number,
                default: 0
            }
        },
        data() { 
            return { 
                hour: '',
                minute:'',
                second:''
            }
        },
        created(){ 
            var a =this;
            var start = a.start.toString().substring(0,10);
            var finish = a.finish.toString().substring(0,10);
            var timer = parseInt(finish)-parseInt(start)
            var hours = parseInt((timer % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = parseInt((timer % (1000 * 60 * 60)) / (1000 * 60));
            var seconds =  parseInt((timer % (1000 * 60)) / 1000);
            a.hour = (hours < 10 ? ('0' + hours) : hours);
            a.minute = (minutes < 10 ? ('0' + minutes) : minutes);
            a.second = (seconds < 10 ? ('0' + seconds) : seconds);
            var interval = setInterval(() => { 
                a.second = (Array(2).join(0) + parseInt(--a.second)).slice(-2)
                if (a.second == 0) { 
                    if (a.minute != 0) { 
                            a.minute = (Array(2).join(0) + parseInt(--a.minute)).slice(-2)
                        a.second = 59
                    } else { 
                        if (a.hour != 0) { 
                            a.hour = (Array(2).join(0) + parseInt(--a.hour)).slice(-2)
                            a.minute = 59
                            a.second = 59
                        } else { 
                            clearInterval(interval)
                            a.finality()
                        }
                    }
                }
            }, 1000)
        },
        methods: { 
            finality(){ 
                this.$emit('finish');
            },
        }
    }
</script>
<style lang="scss">
    .count { 
        width: 100%;
        height: 100%;
        display: flex;
        border-radius: 40rpx;
        background-color: rgba(0,0,0,.2);
        flex-wrap: nowrap;
        padding: 0rpx 12rpx;
        .list { 
            flex: 1;
            height: 80%;
            font-size: 24rpx;
            color: #fff;
            letter-spacing: 2rpx;
            font-weight: 600;
        }
    }
</style>