您好,登錄后才能下訂單哦!
下面先給大家介紹下vue 設(shè)計(jì)一個(gè)倒計(jì)時(shí)秒殺的組件 ,具體內(nèi)容如下所述:
簡介:
倒計(jì)時(shí)秒殺組件在電商網(wǎng)站中層出不窮 不過思路萬變不離其蹤,我自己根據(jù)其他資料設(shè)計(jì)了一個(gè)vue版的
核心思路:1、時(shí)間不能是本地客戶端的時(shí)間 必須是服務(wù)器的時(shí)間這里用一個(gè)settimeout代替 以為時(shí)間必須統(tǒng)一
2、開始時(shí)間,結(jié)束時(shí)間通過父組件傳入,當(dāng)服務(wù)器時(shí)間在這個(gè)開始時(shí)間和結(jié)束時(shí)間的范圍內(nèi) 參加活動(dòng)按鈕可以點(diǎn)擊,并且參加過活動(dòng)以后不能再參加,
3、在組件創(chuàng)建的時(shí)候 同步得到現(xiàn)在時(shí)間服務(wù)時(shí)間差,并且在這里邊設(shè)置定時(shí)器,每秒都做判斷看秒殺是否開始和結(jié)束,
4、在更新時(shí)間的函數(shù)中是否開始和結(jié)束,
5、在computed鉤子中監(jiān)聽disable 確定按鈕是否可點(diǎn)擊
6、參加過活動(dòng)在updated中停止定時(shí)器的計(jì)時(shí),頁面銷毀的時(shí)候也停止計(jì)時(shí)
下邊是代碼
子組件
<template> <div> <button @click="handleClick" :disabled="disabled"> {{btnText}} </button> <span>{{tip}}</span> </div> </template> <script> import moment from 'moment' export default { name: "Spike", props: { startTime: { required: true, validator: (val) => { return moment.isMoment(val) } }, endTime: { required: true, validator: (val) => { return moment.isMoment(val) } } }, data() { return { start: false, end: false, done: false, tip: '', timeGap: 0, btnText:"" } }, computed: { disabled() { //當(dāng)三個(gè)異號(hào)的時(shí)候disable返回真,不可點(diǎn)擊, // 初始化通過this.updateState確定disable的狀態(tài) return !(this.start && !this.end && !this.done); } }, async created() { const serverTime=await this.getServerTime(); this.timeGap=Date.now()-serverTime;//當(dāng)前時(shí)間和服務(wù)器時(shí)間差 this.updateState(); this.timeInterval=setInterval(()=>{ this.updateState() },1000) }, updated(){ if(this.end||this.done){ clearInterval(this.timeInterval) } }, methods: { handleClick() { alert("提交成功"); this.done=true; this.btnText="已參加過活動(dòng)" }, getServerTime() { //模擬服務(wù)器時(shí)間 return new Promise((resolve, reject) => { setTimeout(() => { //當(dāng)前時(shí)間慢10秒就是服務(wù)器時(shí)間 resolve(new Date(Date.now() -10 * 1000).getTime())//跟本地時(shí)間差 }, 0) }) }, updateState() { const now = moment(new Date(Date.now() - this.timeGap));//當(dāng)前服務(wù)器時(shí)間 const diffStart=this.startTime.diff(now);//開始時(shí)間和服務(wù)器時(shí)間之差 const diffEnd=this.endTime.diff(now);//結(jié)束時(shí)間和服務(wù)器時(shí)間之差 if(diffStart<0){ this.start=true; this.tip="秒殺已開始"; this.btnText="參加" }else{ this.tip=`距離秒殺開始還剩${Math.ceil(diffStart/1000)}秒`; this.btnText="活動(dòng)未開始"; } if(diffEnd<=0){ this.end=true; if( !this.btnText==="已參加過活動(dòng)"||this.btnText==="參加"){ this.tip="秒殺已結(jié)束"; this.btnText="活動(dòng)已結(jié)束"; } } } }, beforeDestroy() { clearInterval(this.timeInterval) } } </script> <style scoped> button[disabled]{ cursor: not-allowed; } </style>
父組件
<template> <div> <h2 >設(shè)計(jì)一個(gè)秒殺倒計(jì)時(shí)的組件</h2> <Spike :startTime="startTime" :endTime="endTime"></Spike> </div> </template> <script> import Spike from './Spike' import moment from 'moment' export default { name: "index", components:{ Spike }, data(){ return{ endTime:moment(new Date(Date.now()+10*1000)), startTime:moment(new Date(Date.now())) } } } </script> <style scoped> </style>
用到moment的這個(gè)關(guān)于時(shí)間操作的庫
下面緊接著給大家介紹小程序或者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)行處理渲染到頁面 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); }, <view class='item-money-name'> <view class='item-money'>¥{{item.money}}</view> <view class="tui-countdown-content {{(countDownList[index].day && countDownList[index].hou && countDownList[index].min && countDownList[index].sec) == 0?'tibg':''}}"> <text>剩余</text> <text class='tui-conutdown-box'>{{countDownList[index].day}}</text> <text>天</text> <text class='tui-conutdown-box'>{{countDownList[index].hou}}:</text> <text class='tui-conutdown-box'>{{countDownList[index].min}}:</text> <text class='tui-conutdown-box'>{{countDownList[index].sec}}</text> </view> </view>
countDownList: []
主要是將獲取到的時(shí)間循環(huán)出來單獨(dú)存一個(gè)數(shù)組。然后再倒計(jì)時(shí)。獲取的時(shí)間和計(jì)算機(jī)的時(shí)間對(duì)比。
然后再每個(gè)商品的index下便可獲取到每個(gè)倒計(jì)時(shí)了
總結(jié)
以上所述是小編給大家介紹的vue 實(shí)現(xiàn)倒計(jì)時(shí)秒殺的組件,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。