uni-app实现拼多多倒计时拼团

(xx)效果图?

在这里插入图片描述

(1)倒计时方法

其中self是我传入的uni-app中的this。 self.assembleData则为数组===》一个个团

export function countTime(self){
    let timer = setInterval(function () {
        for (let i = 0; i < self.assembleData.length; i++) {
            self.assembleData[i].remainTime -= 1000
            let t = self.assembleData[i].remainTime
            if (t > 0) {
                let day = Math.floor(t / 86400000)
                let hour = Math.floor((t / 3600000) % 24)
                let min = Math.floor((t / 60000) % 60)
                let sec = Math.floor((t / 1000) % 60)
                day = day < 10 ? '0' + day : day
                hour = hour < 10 ? '0' + hour : hour
                min = min < 10 ? '0' + min : min
                sec = sec < 10 ? '0' + sec : sec
                let format = ''
                format = `${hour}:${min}:${sec} `
                self.assembleData[i].remainTimeStr = format
             } else {
                // 进行判断 如果数据内所有的倒计时已经结束,那么结束定时器, 如果没有那么继续执行定时器
                let flag = self.assembleData.every((val, ind) => val.remainTime <= 0)
                if (flag) clearInterval(timer)
                self.assembleData[i].remainTimeStr = `已结束` // 结束文案
             }
        }
    }, 1000)
}

(2)计算当天到结束的时间戳

export function getRemainStr(endtime){
	return new Date(endtime).valueOf()-new Date().valueOf()
}

(3)由于ios不兼容2019-11-28的格式需要单独处理

(1)判断是否是Ios

const isIos=()=>{
	return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
}

(2)ios转为2019/11/28

xxx.split('-').join('/')

(4)最后,只有一条?两条,滚动。。。。等细节处理。省略

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章