抢购网站服务器时间表,js获取服务器时间，实现抢购倒计时
商品搶購倒計時，涉及到一個問題，就是時間的準確性，如果使用本地手機或者電腦的時間，就會存在時間不準以及誤差，并且還有時區問題
解決方法：使用服務器的時間
困難：但是我們不能每秒鐘請求一次服務器，這肯定是不可取的，訪問量大了之后服務會崩潰的
我的思路是這樣的： 發送ajax請求，從響應頭獲取服務器時間，然后和本地時間進行對比，計算兩者之差，然后讓本地之間加上時間差，就是準確的時間了
1.當我們發送ajax請求的時候，可以在ajax響應頭中讀取到服務器時間(這就不用后臺專門寫個接口返回給我們前端了)
image.png
2.獲取服務器時間
因為我的項目中使用了Vuex,所以我直接設置了一個全局的方法來保存服務器時間
image.png
在Vuex中計算時間差，我使用了moment.js插件
//vuex獲取服務器時間 并計算差
state:{
serveTime: moment(new Date()),
differTime: 0, //手機和服務器時間之差
},
mutations:{
setServiceTime(state, data) {
let phoneTime = moment() //手機/瀏覽器 當前時間
state.serveTime = moment(data) //服務器時間
state.differTime = state.serveTime.diff(phoneTime , 'seconds') //當前時間和服務器時間之差
}
}
4.在商品倒計時頁面處理時間
//頁面部分
距離活動開始時間還剩 {{waitTime}}//js部分
data(){
return {
currentTime:moment(),//當前時間
startTime:'2020-12-30 15:51:00' //活動開始時間
waitTime:'' //活動倒計時時間
}
},
computed:{
surplusTime() { //服務器和本地時間之差
return this.$store.state.differTime
}
},
mounted(){
this.initTime()
},
methods:{
// 時間計時器
initTime(){
this.getNowTime()
this.timer = setInterval(()=>{
this.getNowTime()
},1000)
}，
// 獲取當前時間
getNowTime() {
let nowSeconds = moment().unix() * 1000 //把當前時間轉化為秒
//真實時間 = 當前本地時間 + (服務器時間-當前時間只差)
this. currentTime= moment(nowSeconds).add(this.surplusTime,'seconds').format('YYYY-MM-DD HH:mm:ss')
},
// 搶購開始時間倒計時
computedTime(){
let du = moment.duration(moment(this.startTime) - moment(this.currentTime), 'ms'), //距離開始搶購剩余時分秒
hours = du.get('hours'),
mins = du.get('minutes'),
ss = du.get('seconds');
this.waitTime = PrefixInteger(hours, 2) + ':' + PrefixInteger(mins, 2) + ':' + PrefixInteger(ss, 2)
},
//時間缺0 補0
PrefixInteger(){
return (Array(n).join(0) + num).slice(-n);
}
}
以上就是我的解決思路，如果大家有更好的思路，歡迎評論區留言，讓大家一起學習，一起進步
總結
以上是生活随笔為你收集整理的抢购网站服务器时间表,js获取服务器时间，实现抢购倒计时的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 苹果如何不显示云服务器照片,苹果云端照片
- 下一篇： fgo服务器维护补偿什么时候才有,fgo