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)最後,只有一條?兩條,滾動。。。。等細節處理。省略

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