真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

vue實(shí)現(xiàn)小程序或商品秒殺倒計(jì)時(shí)

下面先給大家介紹下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í)

 下邊是代碼

子組件  



父組件



用到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ù)大家的!


網(wǎng)頁(yè)名稱(chēng):vue實(shí)現(xiàn)小程序或商品秒殺倒計(jì)時(shí)
文章地址:http://weahome.cn/article/jseggc.html

其他資訊

在線咨詢(xún)

微信咨詢(xún)

電話咨詢(xún)

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部