商品搶購倒計(jì)時(shí)，涉及到一個(gè)問題，就是時(shí)間的準(zhǔn)確性，如果使用本地手機(jī)或者電腦的時(shí)間，就會(huì)存在時(shí)間不準(zhǔn)以及誤差，并且還有時(shí)區(qū)問題

解決方法：使用服務(wù)器的時(shí)間

困難：但是我們不能每秒鐘請求一次服務(wù)器，這肯定是不可取的，訪問量大了之后服務(wù)會(huì)崩潰的

我的思路是這樣的： 發(fā)送ajax請求，從響應(yīng)頭獲取服務(wù)器時(shí)間，然后和本地時(shí)間進(jìn)行對比，計(jì)算兩者之差，然后讓本地之間加上時(shí)間差，就是準(zhǔn)確的時(shí)間了

1.當(dāng)我們發(fā)送ajax請求的時(shí)候，可以在ajax響應(yīng)頭中讀取到服務(wù)器時(shí)間(這就不用后臺(tái)專門寫個(gè)接口返回給我們前端了)

image.png

2.獲取服務(wù)器時(shí)間

因?yàn)槲业捻?xiàng)目中使用了Vuex,所以我直接設(shè)置了一個(gè)全局的方法來保存服務(wù)器時(shí)間

image.png

在Vuex中計(jì)算時(shí)間差，我使用了moment.js插件

//vuex獲取服務(wù)器時(shí)間 并計(jì)算差

state:{

serveTime: moment(new Date()),

differTime: 0, //手機(jī)和服務(wù)器時(shí)間之差

},

mutations:{

setServiceTime(state, data) {

let phoneTime = moment() //手機(jī)/瀏覽器 當(dāng)前時(shí)間

state.serveTime = moment(data) //服務(wù)器時(shí)間

state.differTime = state.serveTime.diff(phoneTime , 'seconds') //當(dāng)前時(shí)間和服務(wù)器時(shí)間之差

}

}

4.在商品倒計(jì)時(shí)頁面處理時(shí)間

//頁面部分

距離活動(dòng)開始時(shí)間還剩 {{waitTime}}

//js部分

data(){

return {

currentTime:moment(),//當(dāng)前時(shí)間

startTime:'2020-12-30 15:51:00' //活動(dòng)開始時(shí)間

waitTime:'' //活動(dòng)倒計(jì)時(shí)時(shí)間

}

},

computed:{

surplusTime() { //服務(wù)器和本地時(shí)間之差

return this.$store.state.differTime

}

},

mounted(){

this.initTime()

},

methods:{

// 時(shí)間計(jì)時(shí)器

initTime(){

this.getNowTime()

this.timer = setInterval(()=>{

this.getNowTime()

},1000)

}，

// 獲取當(dāng)前時(shí)間

getNowTime() {

let nowSeconds = moment().unix() * 1000 //把當(dāng)前時(shí)間轉(zhuǎn)化為秒

//真實(shí)時(shí)間 = 當(dāng)前本地時(shí)間 + (服務(wù)器時(shí)間-當(dāng)前時(shí)間只差)

this. currentTime= moment(nowSeconds).add(this.surplusTime,'seconds').format('YYYY-MM-DD HH:mm:ss')

},

// 搶購開始時(shí)間倒計(jì)時(shí)

computedTime(){

let du = moment.duration(moment(this.startTime) - moment(this.currentTime), 'ms'), //距離開始搶購剩余時(shí)分秒

hours = du.get('hours'),

mins = du.get('minutes'),

ss = du.get('seconds');

this.waitTime = PrefixInteger(hours, 2) + ':' + PrefixInteger(mins, 2) + ':' + PrefixInteger(ss, 2)

},

//時(shí)間缺0 補(bǔ)0

PrefixInteger(){

return (Array(n).join(0) + num).slice(-n);

}

}

以上就是我的解決思路，如果大家有更好的思路，歡迎評(píng)論區(qū)留言，讓大家一起學(xué)習(xí)，一起進(jìn)步

總結(jié)

以上是生活随笔為你收集整理的抢购网站服务器时间表,js获取服务器时间，实现抢购倒计时的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。