在做活动秒杀,拼图倒计时的时候会出现这样一个问题。
用本当前时间作为参考进行倒计时,会出现BUG,如果用户修改了本地时间,那么状态也会相应的改变。所以,必需使用服务端的当前时间。
但是获取服务器来做倒计时,就需要实时请求服务端来获取到当前时间,来进行倒计时,这样很浪费资源。
所以这里只需要获取一次服务器当前时间与活动结束时间,用他们的差值来直接做倒计时。
/*
////////////////////////////////
时间戳转换为天、时、分、秒,并倒计时
////////////////////////////////
*/
export const transTime=(timestamp)=>{
let result ={},$days,$hours,$minutes,$secend;
if (timestamp >= 86400) {
$days = Math.floor(timestamp / 86400);
timestamp = timestamp % 86400;
result.d=$days
if (timestamp <= 0) {
result.d='';
}
}
if (timestamp >= 3600) {
$hours = Math.floor(timestamp / 3600);
timestamp = timestamp % 3600;
if ($hours < 10) {
$hours = '0' + $hours;
}
result.h=$hours;
}
if (timestamp >= 60) {
$minutes = Math.floor(timestamp / 60);
timestamp = timestamp % 60;
if ($minutes < 10) {
$minutes = '0' + $minutes;
}
result.m=$minutes;
}
$secend = Math.floor(timestamp);
if ($secend < 10) {
$secend = '0' + $secend;
}
result.s= $secend;
//console.log(result)
return result;
}
需要倒计时的页面中引入该模块
import {transTime} from '@/util/time';
在页面中调用
setInterval(()=>{
/* 这里传入你的时间戳差值(返回格式为{d:xx,h:xx,m:xx,s:xx})然后根据你自己项目的业务逻辑,拿上去就对了 */
/*d为还剩多少天,h为还剩多少小时,m为还剩多少分钟,s为还剩多少秒*/
let times = transTime(leftTime)
leftTime = leftTime-1;
},1000)
Full text complete, Reproduction please indicate the source. Help you? Not as good as one:
Comment(Comments need to be logged in. You are not logged in.)
You need to log in before you can comment.