html5倒计时秒杀怎么做,vue 设计一个倒计时秒杀的组件
HTML
CSS
HTML5
CSS3
vue 設計一個倒計時秒殺的組件
簡介：
倒計時秒殺組件在電商網站中層出不窮? 不過思路萬變不離其蹤，我自己根據其他資料設計了一個vue版的
核心思路：1、時間不能是本地客戶端的時間? 必須是服務器的時間這里用一個settimeout代替?以為時間必須統一
2、開始時間，結束時間通過父組件傳入，當服務器時間在這個開始時間和結束時間的范圍內? 參加活動按鈕可以點擊，并且參加過活動以后不能再參加，
3、在組件創建的時候?同步得到現在時間服務時間差，并且在這里邊設置定時器，每秒都做判斷看秒殺是否開始和結束，
4、在更新時間的函數中是否開始和結束，
5、在computed鉤子中監聽disable?確定按鈕是否可點擊
6、參加過活動在updated中停止定時器的計時，頁面銷毀的時候也停止計時
下邊是代碼
子組件
{{btnText}}
{{tip}}
name:"Spike",
props: {
startTime: {
required:true,
validator: (val)=>{returnmoment.isMoment(val)
}
},
endTime: {
required:true,
validator: (val)=>{returnmoment.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)
}
}
cursor: not-allowed;
}
父組件
設計一個秒殺倒計時的組件
name:"index",
components:{
Spike
},
data(){return{
endTime:moment(new Date(Date.now()+10*1000)),
startTime:moment(newDate(Date.now()))
}
}
}
用到moment的這個關于時間操作的庫
內容來源于網絡，如有侵權請聯系客服刪除
總結
以上是生活随笔為你收集整理的html5倒计时秒杀怎么做,vue 设计一个倒计时秒杀的组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ecshop手机端html,ECSHOP
- 下一篇： 计算机类专业要不要练打字,计算机专业学生