VUE中使用活动倒计时封装方法

针对从服务器获取当前时间与结束时间,用差值时间戳进行倒计时。

VUE中使用活动倒计时封装方法

By img mermen Create at:Dec 6, 2019, 5:59:39 PM 

Tags: VUE 倒计时 活动倒计时

针对从服务器获取当前时间与结束时间,用差值时间戳进行倒计时。


在做活动秒杀,拼图倒计时的时候会出现这样一个问题。

用本当前时间作为参考进行倒计时,会出现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.

Comments (0 Comments)