前端时间倒计时

最新推荐文章于 2024-10-06 12:17:25 发布

CRjames

最新推荐文章于 2024-10-06 12:17:25 发布

阅读量2.5k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/love_jiahua/article/details/121282776

版权

本文介绍了如何使用Vue.js和JavaScript实现一个倒计时功能，通过定时器和递归，实时显示距离指定未来时间的剩余天数、小时、分钟和秒。关键步骤包括获取当前时间、计算时间差，并利用formatTime和formatTimes过滤器格式化显示结果。

摘要由CSDN通过智能技术生成

距离未来的某一时间和当前时间的倒计时的，我们需要用到定时器和递归的方法。

<template>
   <div> 
     <span class="countdownText" v-if="dd != 0">{{dd}}天</span>
     <span  class="countdownTime">{{hh|formatTime}}</span>
     <span class="countdownTime" >{{hh|formatTimes}}</span>:
     <span class="countdownTime"> {{mm|formatTime}}</span>
     <span class="countdownTime" >{{mm|formatTimes}}</span>:
     <span class="countdownTime">{{ss|formatTime}}</span>
    <span class="countdownTime"> {{ss|formatTimes}}</span> 
   </div>
</template>

用到了过滤器
 filters:{
   formatTime: function (dataStr) {
      return  (dataStr).toString().substr(0,1);
     
   },
  formatTimes: function (dataStr) {
      return (dataStr).toString().substr(1,2);
   },
  },

时间属于这样的样式。所以采用过滤器将时间分割出来。

 //倒计时
    countTime:function(){
        var that=this;
        let nowTime = new Date().getTime();//当前时间
        let leftTime = this.lastdate - nowTime;
      //this.lastdata接口传递过来的倒计时结束时间，时间戳，需要用时间戳比较，获取时间差
      //this.endDates属于倒计时关闭的状态 
     //递归每秒调用countTime方法，显示动态时间效果
      if(nowTime>this.endDates && nowTime<this.lastdate){
           //this.kaijing="活动开奖中";
           this.clearfunction=setTimeout(function(){
            that.countTime();
          },1000);
        }else if(nowTime < this.endDates){
          this.dd= Math.floor(leftTime/1000/60/60/24);  
          this.hh = this.checkTime(Math.floor(leftTime/1000/60/60%24));
          this.mm = this.checkTime(Math.floor(leftTime/1000/60%60));
          this.ss = this.checkTime(Math.floor(leftTime/1000%60));
          this.clearfunction=setTimeout(function(){
            that.countTime();
          },1000);
        }else if(nowTime>this.endDates){
         //当前时间大于结束时间，不显示倒计时的操作
       }
    },
    checkTime(index){
      if(index < 10){
        index = "0" + index,
       //时间补零的操作
      }
      return index;
    },

根据项目的时间，开始执行倒计时的count方法，离开页面的时间一定记得把倒计时暂停，防止一直在执行倒计时，本方法是按照秒倒计时，分秒时，可自行修改setTimeout的时间间隔。

可以将clearfunction作为一个对象放在data中，结束的时候直接调用

clearTimeout(this.clearfunction)；