首页 > 其他 > 详细

「组件」倒计时

时间:2021-03-17 09:53:05      阅读:42      评论:0      收藏:0      [点我收藏+]

1:在components文件夹下新建CountDown.vue

<template>
    <p>{{time}}</p>
</template>
<script>
    export default {
        data() {
            return {
                time: ‘‘,
                flag: false//停止
            }
        },
        mounted() {
            let time = setInterval(() => {
                if (this.flag == true) {
                    clearInterval(time)
                }
                this.timeDown()
            }, 500)
        },
        props: {
            endTime: {
                type: String
            }
        },
        methods: {
            timeDown() {
                const endTime = new Date(this.endTime)
                const nowTime = new Date();
                let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000)
                let d = parseInt(leftTime / (24 * 60 * 60))
                let h = this.formate(parseInt(leftTime / (60 * 60) % 24))
                let m = this.formate(parseInt(leftTime / 60 % 60))
                let s = this.formate(parseInt(leftTime % 60))
                if (leftTime <= 0) {
                    this.flag = true
                    this.$emit(‘time-end‘)
                }
                this.time = `${m}分${s}秒` // 需要修改时间样式的话 ,比如需要什么30分钟倒计时,就只保留分和秒
            },
            formate(time) {
                if (time >= 10) {
                    return time
                } else {
                    return `0${time}`
                }
            }
        }
    }
</script>
2:在需要使用的组件
<CountDown :endTime=‘this.endTime‘></CountDown> 
import CountDown @/components/CountDown.vue‘;
components: {CountDown},
endTime: sessionStorage.testTime,

「组件」倒计时

原文:https://www.cnblogs.com/wxrk/p/14547364.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!