Vue实现24小时倒计时

Vue实现24小时倒计时,第1张

做了一个效果,后端会返给我一个阅读开始时间,然后前端需要做的是从阅读时间开始计时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() //调用定时器
            },

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1296715.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存