溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
下面先給大家介紹下vue 設計一個倒計時秒殺的組件 ，具體內容如下所述：
簡介：
倒計時秒殺組件在電商網站中層出不窮 不過思路萬變不離其蹤，我自己根據其他資料設計了一個vue版的
核心思路：1、時間不能是本地客戶端的時間 必須是服務器的時間這里用一個settimeout代替 以為時間必須統一
2、開始時間，結束時間通過父組件傳入，當服務器時間在這個開始時間和結束時間的范圍內 參加活動按鈕可以點擊，并且參加過活動以后不能再參加，
3、在組件創建的時候 同步得到現在時間服務時間差，并且在這里邊設置定時器，每秒都做判斷看秒殺是否開始和結束，
4、在更新時間的函數中是否開始和結束，
5、在computed鉤子中監聽disable 確定按鈕是否可點擊
6、參加過活動在updated中停止定時器的計時，頁面銷毀的時候也停止計時
下邊是代碼
子組件
<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() {
//當三個異號的時候disable返回真，不可點擊，
// 初始化通過this.updateState確定disable的狀態
return !(this.start && !this.end && !this.done);
}
},
async created() {
const serverTime=await this.getServerTime();
this.timeGap=Date.now()-serverTime;//當前時間和服務器時間差
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="已參加過活動"
},
getServerTime() {
//模擬服務器時間
return new Promise((resolve, reject) => {
setTimeout(() => {
//當前時間慢10秒就是服務器時間
resolve(new Date(Date.now() -10 * 1000).getTime())//跟本地時間差
}, 0)
})
},
updateState() {
const now = moment(new Date(Date.now() - this.timeGap));//當前服務器時間
const diffStart=this.startTime.diff(now);//開始時間和服務器時間之差
const diffEnd=this.endTime.diff(now);//結束時間和服務器時間之差
if(diffStart<0){
this.start=true;
this.tip="秒殺已開始";
this.btnText="參加"
}else{
this.tip=`距離秒殺開始還剩${Math.ceil(diffStart/1000)}秒`;
this.btnText="活動未開始";
}
if(diffEnd<=0){
this.end=true;
if( !this.btnText==="已參加過活動"||this.btnText==="參加"){
this.tip="秒殺已結束";
this.btnText="活動已結束";
}
}
}
},
beforeDestroy() {
clearInterval(this.timeInterval)
}
}
</script>
<style scoped>
button[disabled]{
cursor: not-allowed;
}
</style>
父組件
<template>
<div>
<h2 >設計一個秒殺倒計時的組件</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的這個關于時間操作的庫
下面緊接著給大家介紹小程序或者vue商品秒殺倒計時
最近做小程序商城。列表秒殺倒計時這個坑死了。還是借鑒網上大佬的方法
let goodsList = [{
actEndTime: '2018-06-24 10:00:43'
}]
let endTimeList = [];
// 將活動的結束時間參數提成一個單獨的數組，方便操作
this.data.mydata.rush.forEach(o => {
endTimeList.push(o.actEndTime)
})
this.setData({
actEndTimeList: endTimeList
});
// 執行倒計時函數
this.countDown();
timeFormat(param) { //小于10的格式化函數
return param < 10 ? '0' + param : param;
},
countDown(it) { //倒計時函數
// 獲取當前時間，同時得到活動結束時間數組
let newTime = new Date().getTime();
let endTimeList = this.data.actEndTimeList;
let countDownArr = [];
// 對結束時間進行處理渲染到頁面
endTimeList.forEach(o => {
let endTime = new Date(o).getTime();
let obj = null;
// 如果活動未結束，對時間進行處理
if (endTime - newTime > 0) {
let time = (endTime - newTime) / 1000;
// 獲取天、時、分、秒
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 { //活動已結束，全部設置為'00'
obj = {
day: '00',
hou: '00',
min: '00',
sec: '00'
}
}
countDownArr.push(obj);
})
// 渲染，然后每隔一秒執行一次倒計時函數
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: []
主要是將獲取到的時間循環出來單獨存一個數組。然后再倒計時。獲取的時間和計算機的時間對比。
然后再每個商品的index下便可獲取到每個倒計時了
總結
以上所述是小編給大家介紹的vue 實現倒計時秒殺的組件，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
