商品抢购倒计时,涉及到一个问题,就是时间的准确性,如果使用本地手机或者电脑的时间,就会存在时间不准以及误差,并且还有时区问题
解决方法:
使用服务器的时间
困难:但是我们不能每秒钟请求一次服务器,这肯定是不可取的,访问量大了之后服务会崩溃的
我的思路是这样的: 发送ajax请求,从响应头获取服务器时间,然后和本地时间进行对比,计算两者之差,然后让本地之间加上时间差,就是准确的时间了
1.当我们发送ajax请求的时候,可以在ajax响应头中读取到服务器时间(这就不用后台专门写个接口返回给我们前端了)
setServiceTime(state, data) { let phoneTime = moment() //手机/浏览器 当前时间 state.serveTime = moment(data) //服务器时间 state.differTime = state.serveTime.diff(phoneTime , 'seconds') //当前时间和服务器时间之差4.在商品倒计时页面处理时间
//页面部分
<template>
<div>距离活动开始时间还剩 {{waitTime}} </div>
</template>
//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(){