商城的抢购倒计时功能(前端开发)

本代码的业务场景是商城的秒杀商品活动，为了计算多个商品所以采用了循环所有商品的写法，代码仅供参考，请根据具体业务逻辑修改

1.定义一个方法，用来计算出每个商品活动截止时间和系统当前时间的时间差，此处当前系统时间建议让后端返回在接口中，更加精准

computetTime() {
        //secondSkill 为商品的集合
            let reds = JSON.parse(JSON.stringify(this.secondSkill));
            let handlelist = reds.map(a => {
        //activityEndTime 每个商品的活动结束时间
                return a.activityEndTime;
            });
            this.currentTime = this.currentTime.replace(/-/g, "/");
            for (let i = 0; i < handlelist.length; i++) {
                handlelist[i] = handlelist[i].replace(/-/g, "/");
        //计算时间差，结果是时间戳组成的数组
                let numTime = new Date(handlelist[i]).getTime() - new Date(this.currentTime).getTime();
                console.log(numTime);
        //data中定义一个arr保存计算好的时间差
                this.arr.push(numTime);
            }
            this.runBack(this.arr);
        },

2.在定义一个方法，用于倒计时的主要的逻辑，包括时间的转化，计时器等

runBack(cm) {
            let rocallTime = [];
        //遍历第一个步中储存时间差时间戳的数据
            for (let i = 0; i < cm.length; i++) {
                let callTime = '';
                let dateDiff = cm[i] * 1;     //转成数字类型
                let dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
                let leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
                let hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
                //计算相差分钟数
                let leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
                let minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
                //计算相差秒数
                let leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
                let seconds = Math.round(leave3 / 1000);
          //大于0说明还有时间，进行倒计时
                if (cm[i] > 0) {
                    dayDiff = dayDiff
                    hours = hours < 10 ? '0' + hours : hours;
                    minutes = minutes < 10 ? '0' + minutes : minutes;
                    seconds = seconds < 10 ? '0' + seconds : seconds;
                    if (cm[i] > 60000) {
                        callTime = dayDiff + '天' + hours + ':' + minutes + ':' + seconds;
                    } else {
                        callTime = '0' + '天' + '00' + ':' + minutes + ':' + seconds;
                    }
           //此处为核心，把所有格式化好的时间保存在data中定义的rocallTime中保存，需要在页面渲染时，就跟随遍历的商品依次展示，例如：{{ rocallTime[index] }}
                    rocallTime.push(callTime);
                    this.rocallTime = rocallTime;
                    let _msThis = this;
                    clearTimeout(this.timeOut2);
                    this.timeOut2 = setTimeout(function() {
           //遍历循环所有的符合条件的时间差，每1000毫秒（1秒）减去1000毫秒（1秒），达到倒计时效果
                        for (let a = 0; a < cm.length; a++) {
                            cm[a] -= 1000;
                        }
                        _msThis.runBack(cm);
                    }, 1000);
                } else {
                    // rocallTime.push('支付时间已过期');
                    //此处处理时间到期的逻辑
                }
            }
        },