Vue实现24小时倒计时

做了一个效果,后端会返给我一个阅读开始时间,然后前端需要做的是从阅读时间开始计时24小时,24小时结束后,默认阅读完成

    methods: {
              
          countDown() {
                var nowtime = new Date()   //获取当前时间
                var time1 = '2022 - 05 - 19 17: 22: 37'
                var date = new Date(time1.replace(/-/g, '/'));
                var starttime = new Date(date);  //定时开始时间
                starttime = Date.parse(starttime)
                var endtime = new Date(starttime + 24 * 60 * 60 * 1000) //定时结束时间

                var lefttime = endtime.getTime() - nowtime.getTime()   //当前时间距离结束时间的毫秒数

                if (lefttime <= 0) lefttime = 0;
                    lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24),   //计算小时数

                    lefth=lefth>9?lefth:'0'+lefth

                    leftm = Math.floor(lefttime / (1000 * 60) % 60),   //计算分钟数
                    leftm=leftm>9?leftm:'0'+leftm

                    lefts = Math.floor(lefttime / 1000 % 60);   //计算秒数
                    lefts=lefts>9?lefts:'0'+lefts

                this.count = lefth + ":" + leftm + ":" + lefts //返回倒计时的字符串
            },

            Time() {
                this.time = setInterval(() => {
                    this.countDown()
                }, 1000)
            },
            },
            mounted() {
                this.Time() //调用定时器
            },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值