下面先給大家介紹下vue 設(shè)計(jì)一個(gè)倒計(jì)時(shí)秒殺的組件 ,具體內(nèi)容如下所述:
網(wǎng)站的建設(shè)成都創(chuàng)新互聯(lián)專(zhuān)注網(wǎng)站定制,經(jīng)驗(yàn)豐富,不做模板,主營(yíng)網(wǎng)站定制開(kāi)發(fā).小程序定制開(kāi)發(fā),H5頁(yè)面制作!給你煥然一新的設(shè)計(jì)體驗(yàn)!已為成都柔性防護(hù)網(wǎng)等企業(yè)提供專(zhuān)業(yè)服務(wù)。
簡(jiǎn)介:
倒計(jì)時(shí)秒殺組件在電商網(wǎng)站中層出不窮 不過(guò)思路萬(wàn)變不離其蹤,我自己根據(jù)其他資料設(shè)計(jì)了一個(gè)vue版的
核心思路:1、時(shí)間不能是本地客戶(hù)端的時(shí)間 必須是服務(wù)器的時(shí)間這里用一個(gè)settimeout代替 以為時(shí)間必須統(tǒng)一
2、開(kāi)始時(shí)間,結(jié)束時(shí)間通過(guò)父組件傳入,當(dāng)服務(wù)器時(shí)間在這個(gè)開(kāi)始時(shí)間和結(jié)束時(shí)間的范圍內(nèi) 參加活動(dòng)按鈕可以點(diǎn)擊,并且參加過(guò)活動(dòng)以后不能再參加,
3、在組件創(chuàng)建的時(shí)候 同步得到現(xiàn)在時(shí)間服務(wù)時(shí)間差,并且在這里邊設(shè)置定時(shí)器,每秒都做判斷看秒殺是否開(kāi)始和結(jié)束,
4、在更新時(shí)間的函數(shù)中是否開(kāi)始和結(jié)束,
5、在computed鉤子中監(jiān)聽(tīng)disable 確定按鈕是否可點(diǎn)擊
6、參加過(guò)活動(dòng)在updated中停止定時(shí)器的計(jì)時(shí),頁(yè)面銷(xiāo)毀的時(shí)候也停止計(jì)時(shí)
下邊是代碼
子組件
{{tip}}
父組件
設(shè)計(jì)一個(gè)秒殺倒計(jì)時(shí)的組件
用到moment的這個(gè)關(guān)于時(shí)間操作的庫(kù)
下面緊接著給大家介紹小程序或者vue商品秒殺倒計(jì)時(shí)
最近做小程序商城。列表秒殺倒計(jì)時(shí)這個(gè)坑死了。還是借鑒網(wǎng)上大佬的方法
let goodsList = [{ actEndTime: '2018-06-24 10:00:43' }] let endTimeList = []; // 將活動(dòng)的結(jié)束時(shí)間參數(shù)提成一個(gè)單獨(dú)的數(shù)組,方便操作 this.data.mydata.rush.forEach(o => { endTimeList.push(o.actEndTime) }) this.setData({ actEndTimeList: endTimeList }); // 執(zhí)行倒計(jì)時(shí)函數(shù) this.countDown(); timeFormat(param) { //小于10的格式化函數(shù) return param < 10 ? '0' + param : param; }, countDown(it) { //倒計(jì)時(shí)函數(shù) // 獲取當(dāng)前時(shí)間,同時(shí)得到活動(dòng)結(jié)束時(shí)間數(shù)組 let newTime = new Date().getTime(); let endTimeList = this.data.actEndTimeList; let countDownArr = []; // 對(duì)結(jié)束時(shí)間進(jìn)行處理渲染到頁(yè)面 endTimeList.forEach(o => { let endTime = new Date(o).getTime(); let obj = null; // 如果活動(dòng)未結(jié)束,對(duì)時(shí)間進(jìn)行處理 if (endTime - newTime > 0) { let time = (endTime - newTime) / 1000; // 獲取天、時(shí)、分、秒 let day = parseInt(time / (60 * 60 * 24)); let hou = parseInt(time % (60 * 60 * 24) / 3600); let min = parseInt(time % (60 * 60 * 24) % 3600 / 60); let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60); obj = { day: this.timeFormat(day), hou: this.timeFormat(hou), min: this.timeFormat(min), sec: this.timeFormat(sec) } } else { //活動(dòng)已結(jié)束,全部設(shè)置為'00' obj = { day: '00', hou: '00', min: '00', sec: '00' } } countDownArr.push(obj); }) // 渲染,然后每隔一秒執(zhí)行一次倒計(jì)時(shí)函數(shù) this.setData({ countDownList: countDownArr }) setTimeout(this.countDown, 1000); },¥{{item.money}} 剩余 {{countDownList[index].day}} 天 {{countDownList[index].hou}}: {{countDownList[index].min}}: {{countDownList[index].sec}}
countDownList: []
主要是將獲取到的時(shí)間循環(huán)出來(lái)單獨(dú)存一個(gè)數(shù)組。然后再倒計(jì)時(shí)。獲取的時(shí)間和計(jì)算機(jī)的時(shí)間對(duì)比。
然后再每個(gè)商品的index下便可獲取到每個(gè)倒計(jì)時(shí)了
總結(jié)
以上所述是小編給大家介紹的vue 實(shí)現(xiàn)倒計(jì)時(shí)秒殺的組件,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!