vue多个倒计时vue倒计时vue列表倒计时(单个,列表倒计时,秒杀)vue渲染列表倒计时

版权声明:有用请收藏,转载请注明出处!不做伸手党,谢谢! https://blog.csdn.net/qq_42221334/article/details/87864020

先看效果图!代码分别在下面展示

先看单个倒计时:

代码:

<div class="titRight">
        <div class="top">
          <p>{{detailsListDetails.cate1_name1}}</p>
          <p>还有{{detailsListDetails.project_number4}}头未有人预约计划</p>
        </div>
        <div class="bottom" v-if="ifCountDown==0">
          <p>您还有</p>
          <p style="font-size: 22px;">{{CountDown}}</p>
          <p>可以预约计划</p>
        </div>
        <div class="bottom" v-if="ifCountDown!=0">
          <p>抱歉</p>
          <p style="font-size: 22px;">预约已截止</p>
        </div>
</div>
export default {
    name: "verShops",
    data() {
      return {
        user_collect_type:"",//收藏
        token_centent:JSON.parse(sessionStorage.getItem("loginInformation")),//token
        status_type:"",//预约状态
        status_message1:"",//预约显示的文字
        CountDown:"",//单倒计时
        ifCountDown:0,
      }
    },
methods: {
    initList(){
        var that=this;
        api.post("/api/sssss/sssssss/", {//服务详情
          source:1,
          token:that.token_centent.token,//Token
          uuid:that.businessUuid,//UUID
        })
        .then(function(res) {
          if(res.data.code==1000){
            that.detailsListDetails=res.data.data
            that.value5=parseInt(res.data.data.user_star)
            that.chaturl=res.data.data.user_chat1
            that.user_collect_type=res.data.data.user_collect
            that.status_type=res.data.data.status
            that.status_message1=res.data.data.message1
            that.Djs_time();//获取数据后调用单个的倒计时
            setTimeout(that.Djs_timeList, 1000);//倒计时列表,多个
          }
        });
    },
    Djs_time: function(){
        setInterval( ()=> {
          var Deadline=new Date(this.detailsListDetails.project_time3_str).getTime();
          var presentTime=new Date().getTime();
          var rightTime = Deadline - presentTime;
          if (rightTime > 0) {
            var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
            var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
            var mm = Math.floor((rightTime / 1000 / 60) % 60);
            var ss = Math.floor((rightTime / 1000) % 60);
            this.CountDown= dd + "天" + hh + "小时" + mm + "分" + ss + "秒"
            this.ifCountDown=0
          }else{
            this.CountDown="已到截止申请时间"
            this.status_type=7
            this.status_message1="预约已结束"
            this.ifCountDown=1
          }
        }, 1000);
      },

CountDown  就是最终要在页面上显示的数据!

单个倒计时思路如下:

获取倒计时的截止时间,再获取现在的时间,截止时间戳减去现在的时间戳 如果大于0 就执行 计算结果 

最终拼字符串形式获得数据,渲染页面上即可!

多个倒计时(列表倒计时)

<p v-show="false">{{CountDown}}</p>   //辅助倒计时用于刷新

<div class="list" v-for="(item,index) in MerchantDemandList" :key="index">
    <div class="listPush">
          <div v-show="item.status==1">{{item.message1}}</div>
          <div v-show="item.status==1">
            {{Djs_timeList(item.project_time3_str)}}
            
            <!-- {{item.project_time3_str}} -->
          </div>
          <div v-show="item.status!=1">{{item.message1}}</div>
    </div>
</div>

{{Djs_timeList(item.project_time3_str)}}   for循环下面的 item里的project_time3_str就是传递的截止时间。方法Djs_timeList()

data() {
      return {
        token_centent:JSON.parse(sessionStorage.getItem("loginInformation")),//token
        status_type:"",//预约状态
        status_message1:"",//预约显示的文字
        ifCountDown:0,
        CountDown:"",//辅助倒计时用于刷新
 
      }
    },
methods: {
    initList(){
        var that=this;
        api.post("/api/sssss/sssssss/", {//服务详情
          source:1,
          token:that.token_centent.token,//Token
          uuid:that.businessUuid,//UUID
        })
        .then(function(res) {
          if(res.data.code==1000){
            that.Djs_time();//辅助列表倒计时
            that.status_message1=res.data.data.message1
            that.Djs_time();//获取数据后调用单个的倒计时
            setTimeout(that.Djs_timeList, 1000);//倒计时列表,多个
              
          }
        });
    },
    Djs_time: function(){
        setInterval( ()=> {
          var presentTime=new Date().getTime();
          this.CountDown=presentTime
        }, 1000);
      },
    Djs_timeList:function(itemEnd){
        var endItem=new Date(itemEnd).getTime();//获取列表传的截止时间
        var nowItem=new Date().getTime();//获取当前时间
        var rightTime = endItem - nowItem;//截止时间减去当前时间
        if (rightTime > 0) {//判断剩余倒计时时间如果大于0就执行倒计时否则就结束
          var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
          var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
          var mm = Math.floor((rightTime / 1000 / 60) % 60);
          var ss = Math.floor((rightTime / 1000) % 60);
          var showTime= dd + "天" + hh + "小时" + mm + "分" + ss + "秒"
          // this.MerchantDemandList.status=1
        }else{
          var showTime= "预约已结束"
          // this.MerchantDemandList.status=0
        }
        return showTime
      }
},
mounted(){
  this.initList();
},
//离开页面后清除定时器
destroyed () {
  clearInterval()
}

多个倒计时思路:

setTimeout(that.Djs_timeList, 1000) 在数据获取完成后 加定时器 每1秒执行 调用页面上所有的Djs_timeList() 这个方法

后台正常for循环渲染数据,获取截止时间item.project_time3_str   从Djs_timeList() 这个方法传递截止时间

Djs_timeList()方法里 获取传递的截止时间,截止时间减去现在的时间就是剩余的时间,计算拼字符串,

return 最终结果 返回到页面展示 {{Djs_timeList(item.project_time3_str)}}

结尾

因为这个比较好理解,还是在渲染页面时for循环里直接传递参数去执行的!个人感觉比网上看的其他方法要单独提取个数组要方便多了!且我这里是用的分页,数据比较多!数量不确定,这个好理解

 

3月26 补充:

跳转其他路由后 销毁定时器  加在 destroyed 里个清除即可

mounted(){
      this.initList();
      
},
//离开页面后清除定时器
destroyed () {
      clearInterval()
},

 

更多技巧请查看vue专栏   https://blog.csdn.net/qq_42221334/column/info/27230/1

 

展开阅读全文

没有更多推荐了,返回首页