您正在使用IPV4(34.204.180.223)访问本站 您本次共访问本站 1 次
用户名: 用QQ登录本站
密 码:
验证码:
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】618云上GO!云服务器限时秒杀,1核2G首年95元!       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 建军节 3
2021年 七夕节 16
2022年 元 旦 156
2022年 春 节 187
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    vue实现同时设置多个倒计时
    内容摘要: html如下:divclass='home'tbodytrv-for='(item,index)inbargainGoods':key='index'tdv-text='item.down+Djs_timeList(item.countDown)'/td/tr/tbody/divjs如下:exportdefault{data(){return{bargain......
    html如下:

    <divclass="home">

    <tbody>

    <trv-for="(item,index)inbargainGoods":key="index">

    <tdv-text="item.down+Djs_timeList(item.countDown)"></td>

    </tr>

    </tbody>

    </div>

    js如下:

    exportdefault{

    data(){

    return{

    bargainGoods:[],

    total:0,

    page:1,

    serverTime:0,

    timer:""

    //hostUrl:this.$hostUrl

    };

    },

    //用于数据初始化

    created:function(){

    //获取数据

    this.goods();

    //获取服务器时间

    this.findServiceTime();

    },

    methods:{

    goods:function(){

    var_this=this;

    _this.$axios({

    url:"goods/pageGoods",

    data:{

    current:-1,

    activityStatus:"",

    limit:-1,

    status:"SALE"

    },

    success:response=>{

    _this.bargainGoods=response.items;

    _this.Djs_time();//调用定时器

    //以下是我处理的后台返回数据开始时间和结束时间,页面显示用的

    if(_this.bargainGoods.length!=0){

    for(varkeyin_this.bargainGoods){

    varhour=0;

    varstartime=0;

    if(_this.bargainGoods[key]!=null){

    _this.bargainGoods[key].countDown="";

    _this.bargainGoods[key].down="";


    //结束时间

    hour=_this.bargainGoods[key].overTime;

    startime=_this.bargainGoods[key].activityStartTime;

    hour=hour.replace(/-/g,"/");

    hour=newDate(hour).getTime();

    startime=startime.replace(/-/g,"/");

    startime=newDate(startime).getTime();

    //如果结束时间大于当前时间


    if(hour>_this.serverTime&&startime<_this.serverTime){

    varhourtime=hour-_this.serverTime;

    if(hourtime>0){

    _this.bargainGoods[key].down="结束倒计时:";

    _this.bargainGoods[key].countDown=

    _this.bargainGoods[key].overTime;

    }

    }elseif(startime>_this.serverTime){

    varstarhourtime=startime-_this.serverTime;

    if(starhourtime>0){

    _this.bargainGoods[key].down="开始倒计时:";

    _this.bargainGoods[key].countDown=

    _this.bargainGoods[key].activityStartTime;

    }

    }else{

    _this.bargainGoods[key].down="已结束";

    _this.bargainGoods[key].countDown="";

    }

    //console.log(_this.bargainGoods);

    }

    }

    _this.bargainGoods=_this.bargainGoods;

    }

    }

    });

    },

    //获取服务器时间

    findServiceTime(){

    var_this=this;

    _this.$axios({

    url:"serverTime/getDateTime",

    success:function(res){

    _this.serverTime=res.item;

    }

    });

    },


    Djs_time:function(){

    this.timer=setInterval(()=>{

    this.serverTime=this.serverTime+1000;

    },1000);

    },


    Djs_timeList:function(itemEnd){

    //此处itemEnd的日期是年月日时分秒

    varendItem=newDate(itemEnd).getTime();//获取列表传的截止时间,转成时间戳

    varnowItem=this.serverTime;//获取当前时间

    varrightTime=endItem-nowItem;//截止时间减去当前时间

    if(rightTime>0){

    //判断剩余倒计时时间如果大于0就执行倒计时否则就结束

    vardd=Math.floor(rightTime/1000/60/60/24);

    varhh=Math.floor((rightTime/1000/60/60)%24);

    varmm=Math.floor((rightTime/1000/60)%60);

    varss=Math.floor((rightTime/1000)%60);

    varshowTime=dd+"天"+hh+"小时"+mm+"分"+ss+"秒";

    }else{

    varshowTime="";

    }

    returnshowTime;

    },


    },

    //离开页面后清除定时器

    destroyed(){

    clearInterval(this.timer);

    }

    };

    版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:vue实现指定日期之间的倒计时 下一篇:利用JS定时器实现元素移动
    发布日期:2021/7/21
    手机扫二维码直达本页
    发布时间:15:26:20
    点击:98
    录入:齐天大圣
    相关文章
    Baidu

    YiJiaCMS V5.9 Build 21.7.20(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021