使用window对象实现倒计时

定义在vue的methods中， loadMenus已被钩子函数调用

app.alltimes是五个剩余的时间，每个都需要递减，单位是毫秒

注意开启倒计时用setInterval，关闭倒计时用clearInterval

 

 var app = new Vue({
        el: '#app',
        data() {
            return {
                goodslist: [],
                dateMenus: [],
                ctime: 0,     //当前被选中的时间按钮的下标，默认为0，第一个按钮
                alltimes: []  //倒计时，注意第一个是结束倒计时，后四个是开始倒计时
            }
        },
        methods: {
            loadMenus: function () {
                axios.get("/api/wseckillgoods/timeMenus").then(function (res) {
                    app.dateMenus = res.data;

                    //计算五个时间段正确的倒计时
                    for (var i =0;i<app.dateMenus.length;i++){
                        if(i==0){
                            //第一个时间段为结束的倒计时，用第二个时间的开始值减当前的时间
                            //不能用i+1直接替换x，js不能这么写
                            var x = i+1;
                            //vue提供的设置数据的方法，参数一 数据对象（此处为数组） 参数2 数组的索引  两时间相减，得毫秒数
                            app.$set(app.alltimes,i,new Date(app.dateMenus[x]).getTime() - new Date().getTime());
                        }else {
                            //后四个时间的都是开始倒计时，都是用各自的开始时间减当前时间
                            app.$set(app.alltimes,i,new Date(app.dateMenus[i]).getTime() - new Date().getTime());
                        }
                    }

                    //每秒倒计时减一秒（1000毫秒） setInterval两个参数，第一个是一个是要执行的方法，第二是多久执行一次
                    let timers = window.setInterval(function () {
                        for (var i = 0; i < app.alltimes.length; i++) {
                           //时间递减
                            app.$set(app.alltimes,i,app.alltimes[i]-1000);
                            if(app.alltimes[i]<=0){
                                //停止倒计时，并刷新时间段
                                window.clearInterval(timers);
                                app.loadMenus();
                            }
                        }
                    }, 1000);

                })
            },
            //将毫秒转换成时分秒
            timedown:function(num) {
                var oneSecond = 1000;
                var oneMinute=oneSecond*60;
                var oneHour=oneMinute*60
                //小时
                var hours =Math.floor(num/oneHour);
                //分钟
                var minutes=Math.floor((num%oneHour)/oneMinute);
                //秒
                var seconds=Math.floor((num%oneMinute)/oneSecond);
                //拼接时间格式
                var str = hours+':'+minutes+':'+seconds;
                return str;
            }
        },
        created: function () {
            this.loadMenus();
        }
    })

 

1